同步代码

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

+# just a flag
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

+# just a flag
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

+build/*.js
+src/assets
+public
+dist

.eslintrc.js

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

.idea/codeStyles/Project.xml

+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_GENERATOR_MULT" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+      <option name="SPACE_BEFORE_ASYNC_ARROW_LPAREN" value="false" />
+    </JSCodeStyleSettings>
+    <JetCodeStyleSettings>
+      <option name="PACKAGES_TO_USE_STAR_IMPORTS">
+        <value>
+          <package name="java.util" alias="false" withSubpackages="false" />
+          <package name="kotlinx.android.synthetic" alias="false" withSubpackages="true" />
+          <package name="io.ktor" alias="false" withSubpackages="true" />
+        </value>
+      </option>
+      <option name="PACKAGES_IMPORT_LAYOUT">
+        <value>
+          <package name="" alias="false" withSubpackages="true" />
+          <package name="java" alias="false" withSubpackages="true" />
+          <package name="javax" alias="false" withSubpackages="true" />
+          <package name="kotlin" alias="false" withSubpackages="true" />
+          <package name="" alias="true" withSubpackages="true" />
+        </value>
+      </option>
+    </JetCodeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
+      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
+      <option name="ALIGN_MULTILINE_FOR" value="false" />
+      <option name="IF_BRACE_FORCE" value="1" />
+      <option name="DOWHILE_BRACE_FORCE" value="1" />
+      <option name="WHILE_BRACE_FORCE" value="1" />
+      <option name="FOR_BRACE_FORCE" value="1" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file

.idea/codeStyles/codeStyleConfig.xml

+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file

.idea/flowmonitoringsystem_front_link.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/profiles_settings.xml

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="PROJECT_PROFILE" />
+  </settings>
+</component>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/flowmonitoringsystem_front_link.iml" filepath="$PROJECT_DIR$/.idea/flowmonitoringsystem_front_link.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.travis.yml

+language: node_js
+node_js: 10
+script: npm run test
+notifications:
+  email: false

LICENSE

+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README-zh.md

+# vue-admin-template
+
+> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
+
+[线上地址](http://panjiachen.github.io/vue-admin-template)
+
+[国内访问](https://panjiachen.gitee.io/vue-admin-template)
+
+目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
+
+## Extra
+
+如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+
+## 相关项目
+
+- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
+
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
+
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+
+- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+
+## Build Setup
+
+```bash
+# 克隆项目
+git clone https://github.com/PanJiaChen/vue-admin-template.git
+
+# 进入项目目录
+cd vue-admin-template
+
+# 安装依赖
+npm install
+
+# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+
+# 启动服务
+npm run dev
+```
+
+浏览器访问 [http://localhost:9528](http://localhost:9528)
+
+## 发布
+
+```bash
+# 构建测试环境
+npm run build:stage
+
+# 构建生产环境
+npm run build:prod
+```
+
+## 其它
+
+```bash
+# 预览发布环境效果
+npm run preview
+
+# 预览发布环境效果 + 静态资源分析
+npm run preview -- --report
+
+# 代码格式检查
+npm run lint
+
+# 代码格式检查并自动修复
+npm run lint -- --fix
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+
+## Demo
+
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+
+## Browsers support
+
+Modern browsers and Internet Explorer 10+.
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
+
+Copyright (c) 2017-present PanJiaChen

README.md

+# vue-admin-template
+
+English | [简体中文](./README-zh.md)
+
+> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
+
+**Live demo:** http://panjiachen.github.io/vue-admin-template
+
+
+**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
+
+## Build Setup
+
+
+```bash
+# clone the project
+git clone https://github.com/PanJiaChen/vue-admin-template.git
+
+# enter the project directory
+cd vue-admin-template
+
+# install dependency
+npm install
+
+# develop
+npm run dev
+```
+
+This will automatically open http://localhost:9528
+
+## Build
+
+```bash
+# build for test environment
+npm run build:stage
+
+# build for production environment
+npm run build:prod
+```
+
+## Advanced
+
+```bash
+# preview the release environment effect
+npm run preview
+
+# preview the release environment effect + static resource analysis
+npm run preview -- --report
+
+# code format check
+npm run lint
+
+# code format check and auto fix
+npm run lint -- --fix
+```
+
+Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
+
+## Demo
+
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+
+## Extra
+
+If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+
+For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
+
+## Related Project
+
+- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
+
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
+
+## Browsers support
+
+Modern browsers and Internet Explorer 10+.
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
+
+Copyright (c) 2017-present PanJiaChen

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

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

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

build/index.js

+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

build/utils.js

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

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

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')
+var webpack = require('webpack')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    // app: './src/main.js'
+    app: ['babel-polyfill', './src/main.js']
+
+  },
+  plugins: [ 
+    new webpack.optimize.CommonsChunkPlugin('common.js'),
+    new webpack.ProvidePlugin({
+      jQuery: "jquery",
+      $: "jquery" 
+    }) 
+  ],
+  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]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

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

build/webpack.prod.conf.js

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

jest.config.js

+module.exports = {
+  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  // 'collectCoverage': true,
+  'coverageReporters': [
+    'lcov',
+    'text-summary'
+  ],
+  testURL: 'http://localhost/'
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+        "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

mock/index.js

+import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'
+
+import user from './user'
+import table from './table'
+
+const mocks = [
+  ...user,
+  ...table
+]
+
+// for front mock
+// please use it cautiously, it will redefine XMLHttpRequest,
+// which will cause many of your third-party libraries to be invalidated(like progress event).
+export function mockXHR() {
+  // mock patch
+  // https://github.com/nuysoft/Mock/issues/300
+  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function() {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    this.proxy_send(...arguments)
+  }
+
+  function XHR2ExpressReqWrap(respond) {
+    return function(options) {
+      let result = null
+      if (respond instanceof Function) {
+        const { body, type, url } = options
+        // https://expressjs.com/en/4x/api.html#req
+        result = respond({
+          method: type,
+          body: JSON.parse(body),
+          query: param2Obj(url)
+        })
+      } else {
+        result = respond
+      }
+      return Mock.mock(result)
+    }
+  }
+
+  for (const i of mocks) {
+    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
+  }
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+    type: type || 'get',
+    response(req, res) {
+      console.log('request invoke:' + req.path)
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})

mock/mock-server.js

+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { default: mocks } = require('./index.js')
+  for (const mock of mocks) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocks).length
+  return {
+    mockRoutesLength: mockRoutesLength,
+    mockStartIndex: mockLastIndex - mockRoutesLength
+  }
+}
+
+function unregisterRoutes() {
+  Object.keys(require.cache).forEach(i => {
+    if (i.includes(mockDir)) {
+      delete require.cache[require.resolve(i)]
+    }
+  })
+}
+
+module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
+  // parse app.body
+  // https://expressjs.com/en/4x/api.html#req.body
+  app.use(bodyParser.json())
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }))
+
+  const mockRoutes = registerRoutes(app)
+  var mockRoutesLength = mockRoutes.mockRoutesLength
+  var mockStartIndex = mockRoutes.mockStartIndex
+
+  // watch files, hot reload mock server
+  chokidar.watch(mockDir, {
+    ignored: /mock-server/,
+    ignoreInitial: true
+  }).on('all', (event, path) => {
+    if (event === 'change' || event === 'add') {
+      try {
+        // remove mock routes stack
+        app._router.stack.splice(mockStartIndex, mockRoutesLength)
+
+        // clear routes cache
+        unregisterRoutes()
+
+        const mockRoutes = registerRoutes(app)
+        mockRoutesLength = mockRoutes.mockRoutesLength
+        mockStartIndex = mockRoutes.mockStartIndex
+
+        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
+      } catch (error) {
+        console.log(chalk.redBright(error))
+      }
+    }
+  })
+}

mock/table.js

+import Mock from 'mockjs'
+
+const data = Mock.mock({
+  'items|30': [{
+    id: '@id',
+    title: '@sentence(10, 20)',
+    'status|1': ['published', 'draft', 'deleted'],
+    author: 'name',
+    display_time: '@datetime',
+    pageviews: '@integer(300, 5000)'
+  }]
+})
+
+export default [
+  {
+    url: '/vue-admin-template/table/list',
+    type: 'get',
+    response: config => {
+      const items = data.items
+      return {
+        code: 20000,
+        data: {
+          total: items.length,
+          items: items
+        }
+      }
+    }
+  }
+]

mock/user.js

+
+// const tokens = {
+//   admin: {
+//     token: 'admin-token'
+//   },
+// }
+//
+// const users = {
+//   'admin-token': {
+//     roles: ['admin'],
+//     introduction: 'I am a super administrator',
+//     avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+//     name: 'admin'
+//   },
+// }
+
+export default [
+  // user login
+  {
+    url: '/vue-admin-template/user/login',
+    type: 'post',
+    response: config => {
+      const { username } = config.body
+      // const token = tokens['admin']
+      const token =  {
+        token: username
+      }
+
+      // mock error
+      if (!token) {
+        return {
+          code: 60204,
+          message: 'Account and password are incorrect.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/vue-admin-template/user/info\.*',
+    type: 'get',
+    response: config => {
+      const { token } = config.username
+      const { role } = config.role
+
+      const info = {
+        roles: role,
+          name: token
+      }
+
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+
+      return {
+        code: 20000,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/vue-admin-template/user/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 20000,
+        data: 'success'
+      }
+    }
+  }
+]

package.json

+{
+  "name": "vue-admin-template",
+  "version": "4.2.1",
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "ant-design-vue": "^1.6.5",
+    "axios": "0.18.1",
+    "babel-polyfill": "^6.26.0",
+    "codemirror": "^5.54.0",
+    "crypto-js": "^4.0.0",
+    "deasync": "^0.1.21",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.6",
+    "fuse.js": "^3.4.4",
+    "gojs": "^2.1.29",
+    "jquery": "^2.2.4",
+    "js-cookie": "2.2.0",
+    "js-md5": "^0.7.3",
+    "json2yaml": "^1.1.0",
+    "moment": "^2.29.1",
+    "monaco-editor": "^0.20.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "ol": "^6.3.1",
+    "path-to-regexp": "2.4.0",
+    "relation-graph": "^1.1.0",
+    "vue-count-to": "^1.0.13",
+    "vue-router": "3.0.6",
+    "vuex": "3.1.0",
+    "webpack-dev-server": "^2.11.5",
+    "yamljs": "^0.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "chalk": "2.4.2",
+    "connect": "3.6.6",
+    "eslint": "5.15.3",
+    "eslint-plugin-vue": "5.2.2",
+    "html-webpack-plugin": "3.2.0",
+    "mockjs": "1.0.1-beta3",
+    "monaco-editor-webpack-plugin": "^1.9.0",
+    "node-sass": "^4.14.1",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "0.7.2",
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue": "^2.6.10",
+    "vue-resource": "^1.5.1",
+    "vue-template-compiler": "2.6.12"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

postcss.config.js

+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template >
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  name: 'page-index',
+  data(){
+    return{
+      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
+      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
+    }
+  },
+  methods: {
+  },
+  // <!--在watch中监听实时宽高-->
+  watch: {
+    windowHeight (val) {
+      let that = this;
+      console.log("实时屏幕高度：",val, that.windowHeight );
+    },
+    windowWidth (val) {
+      let that = this;
+      console.log("实时屏幕宽度：",val, that.windowHeight );
+    }
+  },
+
+  mounted() {
+    var that = this;
+    // <!--把window.onresize事件挂在到mounted函数上-->
+    window.onresize = () => {
+      return (() => {
+        window.fullHeight = document.documentElement.clientHeight;
+        window.fullWidth = document.documentElement.clientWidth;
+        that.windowHeight = window.fullHeight;  // 高
+        that.windowWidth = window.fullWidth; // 宽
+      })()
+    };
+  },
+}
+
+</script>
+<style>
+html{
+  overflow-x : hidden ;
+  width: 100%;
+  height : 100%;
+  margin : 0 ;
+  padding : 0 ;
+   overflow-y : hidden ;
+}
+</style>

src/api/alarm.js

+import request from '@/utils/request'
+import baseURL from '@/api/global_variable'
+
+// 业务告警查询
+export function selectYwAlarm(data) {
+  return request({
+    url: baseURL + '/api/v1/alarm/businessAlarm',
+    method: 'post',
+    data: data
+  })
+}
+// 链路告警查询
+export function selectLinkAlarm(data) {
+  return request({
+    url: baseURL + '/api/v1/alarm/linkAlarm',
+    method: 'post',
+    data: data
+  })
+}

src/api/api_alarm_linktarce.js

+import request from '@/utils/request'
+import baseURL from '@/api/global_variable'
+
+// 点击- 标签-- 认证;
+export function click_tab_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/tcpFlowLinkUpdateSubgraph',
+    method: 'get',
+    params: {
+      ywlxType: data
+    }
+  })
+}
+// 点击- 标签-- 开通;
+export function click_tab_kaitong() {
+  return request({
+    url: baseURL + '/api/v1/download28/tcpFlowLinkUpdate',
+    method: 'get'
+  })
+}
+// 点击- 标签-- 二维码;
+export function click_tab_ercode() {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/tcpFlowLinkUpdate',
+    method: 'get'
+  })
+}
+// 点击- 标签-- 出入境;
+export function click_tab_churujing() {
+  return request({
+    url: baseURL + '/api/v1/entryAndExitAuth/tcpFlowLinkUpdate',
+    method: 'get'
+  })
+}
+
+// 修改 --  认证
+export function update_renzheng_machine_line(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/updateAlarmValue',
+    method: 'post',
+    data: data
+  })
+}
+// 修改 - 开通
+export function update_kaitong_machine_line(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/updateAlarmValue',
+    method: 'post',
+    data: data
+  })
+}
+// 修改 - 二维码
+export function update_ercode_machine_line(data) {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/updateAlarmValue',
+    method: 'post',
+    data: data
+  })
+}
+// 修改 - 出入境
+export function update_churujing_machine_line(data) {
+  return request({
+    url: baseURL + '/api/v1/entryAndExitAuth/updateAlarmValue',
+    method: 'post',
+    data: data
+  })
+}

src/api/configurationManagement.js

+import request from '@/utils/request'
+import baseURL from '@/api/global_variable'
+
+// 根据业务站点查询信息;
+export function selectAllModeMsgByYwzd(ywzd) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectAllModeMsgByYwzd',
+    method: 'get',
+    params: {
+      ywzd: ywzd
+    }
+  })
+}
+//ip查询
+export function selectIp(ip) {
+  return request({
+    url: baseURL + '/api/v1/auth/selectIp',
+    method: 'get',
+    params: {
+      ip: ip
+    }
+  })
+}
+// 查询所有业务站点;
+export function selectAllYwzdFromAlarmConfiguration() {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectAllYwzdFromAlarmConfiguration',
+    method: 'get'
+  })
+}
+//查询所有Ip
+export function selectAuthIpConfig() {
+  return request({
+    url: baseURL + '/api/v1/auth/getAuthIpList',
+    method: 'get'
+  })
+}
+//弹框ip详情
+export function authselectAuthIpConfig(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/selectAuthIpConfig',
+    method: 'get',
+    params: {
+      ip: data
+    }
+  })
+}
+// 修改参数;
+export function updateAlarmConfiguration(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/updateAlarmConfiguration',
+    method: 'post',
+    data: {
+      ywzd_id: data.ywzd_id,
+      mode: data.mode,
+      amount_alarm_threshold_rate: data.amount_alarm_threshold_rate,
+      token_alarm_threshold_rate: data.token_alarm_threshold_rate,
+      request_transport_time_line: data.request_transport_time_line,
+      response_rtt_line: data.response_rtt_line,
+      response_transport_time_line: data.response_transport_time_line,
+      trans_handle_time_line: data.trans_handle_time_line,
+      amount: data.amount,
+      tokens: data.tokens
+    }
+  })
+}
+//ip修改
+export function updateAuthIpConfig(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/updateAuthIpConfig',
+    method: 'post',
+    data: {
+      ip:data.ip,
+      amount_alarm_threshold_rate: data.amount_alarm_threshold_rate,
+      token_alarm_threshold_rate: data.token_alarm_threshold_rate,
+      request_transport_time_line: data.request_transport_time_line,
+      response_rtt_line: data.response_rtt_line,
+      response_transport_time_line: data.response_transport_time_line,
+      trans_handle_time_line: data.trans_handle_time_line,
+      amount: data.amount,
+      tokens: data.tokens
+    }
+  })
+}

src/api/global_variable.js

+const baseURL = 'http://127.0.0.1:8083'
+// const baseURL = ''
+export default baseURL
+

src/api/topology.js

+import request from '@/utils/request'
+import baseURL from '@/api/global_variable'
+
+// 点击线查询数据（折线图） -- 认证;
+export function clickLineSelectEcharts_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectTcpFlowByIpAndTime',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      clientIpName: data.clientIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击线查询数据（折线图） -- 开通;
+export function clickLineSelectEcharts_kaitong(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/selectTcpFlowByIpAndTime',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      clientIpName: data.clientIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击线查询数据（折线图） -- 二维码;
+export function clickLineSelectEcharts_erCode(data) {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/selectTcpFlowByIpAndTime',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      clientIpName: data.clientIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击机器查询； -认证
+export function clickNodeSelectEcharts_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectNodeDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击机器查询； -开通
+export function clickNodeSelectEcharts_kaitong(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/selectNodeDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击机器查询； -二维码
+export function clickNodeSelectEcharts_erCode(data) {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/selectNodeDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+//默认警告冲
+export function tcpflowAlarm(ywlxType) {
+  return request({
+    url: baseURL + '/api/v1/auth28/tcpflowAlarm',
+    method: 'get',
+    params: {
+      ywlxType: ywlxType
+    }
+  })
+}
+//二维码默认告警
+export function qrCodeVerify28tcpflowAlarm() {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/tcpflowAlarm',
+    method: 'get',
+  })
+}

src/api/user.js

+import request from '@/utils/request'
+import baseURL from '@/api/global_variable'
+import { data } from 'jquery'
+
+//全局概览 页面数据：
+export function queryAllYwzdCountAndAlarmYwzdCountPieList(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/queryAllYwzdCountAndAlarmYwzdCountPieList',
+    method: 'get',
+    params: {
+      startTime: data.startTime,
+      endTime: data.endTime,
+      ywzd: '',
+      mode: ''
+    }
+  })
+}
+
+//全局概览 -- 根据分钟的统计显示同环比；
+export function queryAmountBranchesLineChartMap(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/queryAmountBranchesLineChartMap',
+    method: 'get',
+    params: {
+      endTime: data,
+      ywzd: '',
+      mode: ''
+    }
+  })
+}
+
+//仪表盘 - 交易汇聚总;
+export function yibiaoJiaoyihuiju_renzheng() {
+  return request({
+    url: baseURL + '/api/v1/auth28/query2',
+    method: 'get',
+    params: {
+      ywzd: ''
+    }
+  })
+}
+
+//仪表盘 - 网证下载 -  交易汇聚总;
+export function yibiaoJiaoyihuiju_wangzheng() {
+  return request({
+    url: baseURL + '/api/v1/download28/query2',
+    method: 'get',
+    params: {
+      ywzd: ''
+    }
+  })
+}
+
+//仪表盘 - 用户明细 - 认证服务仪表盘;
+export function userDetailRenzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectByMode',
+    method: 'get',
+    params: {
+      ywzd: data
+    }
+  })
+}
+//业务流水号查询
+export function selectYwlshInfo(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectYwlshInfo',
+    method: 'get',
+    params: {
+      ywlsh: data
+    }
+  })
+}
+//仪表盘 - 用户明细 - 网证下载仪表盘;
+export function userDetailWangzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/selectByMode',
+    method: 'get',
+    params: {
+      ywzd: data
+    }
+  })
+}
+
+//仪表盘 - 根据用户标志查询数据；
+export function selectByYwzdAuth(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectByYwzd',
+    method: 'get',
+    params: {
+      ywzd: data
+    }
+  })
+}
+
+//仪表盘 - 根据用户标志查询数据；
+export function selectByYwzdDownload(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/selectByYwzd',
+    method: 'get',
+    params: {
+      ywzd: data
+    }
+  })
+}
+
+//仪表盘 -- 交易状态 -- 认证服务;
+export function jiaoyizhuangtaiRenzheng(obj) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectHistoryByModeAndYwzd',
+    method: 'get',
+    params: {
+      ywzd: obj.ywzd,//用户标识
+      mode: obj.mode,//模式
+      timeStamp: obj.time,//时间 标准格式 2020-02-10 12:20
+      type: obj.timeType//模式  （分 ，10分 ，小时，天）
+    }
+  })
+}
+
+// 仪表盘 -- 交易状态 -- 网证下载;
+export function jiaoyizhuangtaiWangzheng(obj) {
+  return request({
+    url: baseURL + '/api/v1/download28/selectHistoryByModeAndYwzd',
+    method: 'get',
+    params: {
+      ywzd: obj.ywzd, // 用户标识
+      mode: obj.mode, // 模式
+      timeStamp: obj.time, // 时间 标准格式 2020-02-10 12:20
+      type: obj.timeType// 模式  （分 ，10分 ，小时，天）
+    }
+  })
+}
+
+//服务监控；
+export function serviceMonitor(timeObj) {
+  return request({
+    url: baseURL + '/api/v1/auth28/ctidDataPacketYesterDayAndTodayContrast',
+    method: 'get',
+    params: {
+      yesterday: timeObj.yesterday,//昨天日期 String   例“2020-10-14”精确到分钟
+      todayBeforeDawn: timeObj.todayBeforeDawn,//今天凌晨String   例“2020-10-15 00:00”精确到分钟
+      currentTime: timeObj.currentTime//当前时间String   例“2020-10-15 15:14” 精确到分钟
+    }
+  })
+}
+
+//服务监控定时任务;
+export function ctidDataPacketTodayContrast(timeObj) {
+  return request({
+    url: baseURL + '/api/v1/auth28/ctidDataPacketTodayContrast',
+    method: 'get',
+    params: {
+      yesterday: timeObj.yesterday,
+      todayBeforeDawn: timeObj.todayBeforeDawn,//今天凌晨String   例“2020-10-15 00:00”精确到分钟
+      currentTime: timeObj.currentTime//当前时间String   例“2020-10-15 15:14” 精确到分钟
+    }
+  })
+}
+
+// 拓扑图 -- 认证链路数据查询;
+export function tuoPuTuRenZheng(ywlxType) {
+  return request({
+    url: baseURL + '/api/v1/auth28/tcpFlowSubgraph',
+    method: 'get',
+    params: {
+      ywlxType: ywlxType// 今天凌晨String   例“2020-10-15 00:00”精确到分钟
+    }
+  })
+}
+
+// 拓扑图  -- 开通拓扑图数据查询;
+export function tuoPuTuKaiTong() {
+  return request({
+    url: baseURL + '/api/v1/download28/tcpFlow',
+    method: 'get'
+  })
+}
+
+// 拓扑图 -- 保存 -- 认证链路;
+export function updateTcpFlowSubgraph_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/updateTcpFlowSubgraph',
+    method: 'post',
+    data: data
+  })
+}
+// 开通拓扑图 -- 保存
+export function updateTcpFlowSubgraph_kaitong(data) {
+  return request({
+    url: baseURL + '/api/v1/download28/updateTcpFlow',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+// 二维码拓扑图 -- 保存
+export function updateTcpFlow_ercode(data) {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/updateTcpFlow',
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+}
+
+// 拓扑图 -- 二维码拓扑图数据查询;
+// export function tuoPuTuErCode() {
+//   return request({
+//     url: baseURL + '/api/v1/qrCodeVerify28/tcpFlow',
+//     method: 'get'
+//   })
+// }
+
+//登录
+export function login(userName, password) {
+  return request({
+    url: baseURL + '/api/v1/user/selectUser',
+    method: 'post',
+    data: {
+      'user_name': userName,
+      'password': password
+    }
+  })
+}
+//修改状态
+export function updateStatus(data) {
+  return request({
+    url: baseURL + '/api/v1/user/updateStatus',
+    method: 'post',
+    data: data
+  })
+}
+//修改角色
+export function updateRole(data) {
+  return request({
+    url: baseURL + '/api/v1/user/updateRole',
+    method: 'post',
+    data: data
+  })
+}
+//告警 -- 业务告警
+export function businessAlarm(data) {
+  return request({
+    url: baseURL + '/api/v1/alarm/businessAlarm',
+    method: 'post',
+    data: {
+      'alarmTpyeList': data.alarmTpyeList,
+      'ywzd': data.ywzd,
+      'mode': data.mode,
+      'startTime': data.startTime,
+      'endTime': data.endTime,
+      'currentPage  ': data.currentPage,
+      'pageCount': data.pageCount
+    }
+  })
+}
+
+export function timerChangeToken() {
+  return request({
+    url: baseURL + '/api/v1/user/tokenDelay',
+    method: 'get'
+  })
+}
+//服务监控查询接口
+export function selectctidDataPacketHistoryContrast(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectctidDataPacketHistoryContrast',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览并发
+export function selectBingFaZheXian(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectBingFaZheXian',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览交易处理时间
+export function selectJiaoYiChuLiShiJian(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectJiaoYiChuLiShiJian',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览请求响应时间
+export function selectQingQiuXiangYingShiJian(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectQingQiuXiangYingShiJian',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览小时
+export function selectJiaoYiLiangZongLan(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectJiaoYiLiangZongLan',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览分钟
+export function selectJiaoYiLiangTongJiMin(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectJiaoYiLiangTongJiMin',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//全局概览同环比
+export function selectJiaoYiLiangTongJiTongHuanBi(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectJiaoYiLiangTongJiTongHuanBi',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//判断接口
+export function checkTime(startTime,endTime) {
+  return request({
+    url: baseURL + '/api/v1/auth28/checkTime',
+    method: 'get',
+    params:{
+      startTime:startTime,
+      endTime:endTime
+    }
+  })
+}
+//查询业务站点中文名
+export function selectYwzdName(ywzd) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectYwzdName',
+    method: 'get',
+    params:{
+      ywzd:ywzd
+    }
+  })
+}
+//模式列表
+export function selectModeList(ywzd) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectModeList',
+    method: 'get',
+    params:{
+      ywzd:ywzd
+    }
+  })
+}
+//搜索
+export function selectYwzdByKeyword(keyword) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectYwzdByKeyword',
+    method: 'get',
+    params:{
+      keyword:keyword
+    }
+  })
+}
+
+//用户列表
+export function userList(data) {
+  return request({
+    url: baseURL + '/api/v1/user/listUser',
+    method: 'post',
+    data: {
+      'real_name': data.realName,
+      'currentPage':data.currentPage,
+      'pageCount':data.pageCount,
+    }
+  })
+}
+export function insertAlarmConfiguration(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/insertAlarmConfiguration',
+    method: 'post',
+    data: data
+  })
+}
+export function updateIpAuthConfig(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/updateIpAuthConfig',
+    method: 'post',
+    data: data
+  })
+}
+//用户列表
+export function ipAuthAlarmList(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/ipAuthAlarmList',
+    method: 'post',
+    data: {
+      'ip': data.ip,
+      'currentPage':data.currentPage,
+      'pageCount':data.pageCount,
+    }
+  })
+}
+
+export function tuoPuTuErCode() {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectAllNodes',
+    method: 'get',
+  })
+}
+//初始化关系图
+export function selectNodeAndLinkList() {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectNodeAndLinkList',
+    method: 'get',
+  })
+}
+//保存关系图
+export function saveNodes(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/saveNodes',
+    method: 'post',
+    data:data
+  })
+}
+//保存好的ip
+export function selectConnectedNode(nodeip) {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectConnectedNode',
+    method: 'get',
+    params:{
+      nodeIp:nodeip
+    }
+  })
+}
+//查询要连接的ip
+export function selectNodeListByDisconnet(nodeip) {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectNodeListByDisConnect',
+    method: 'get',
+    params:{
+      nodeIp:nodeip
+    }
+  })
+}
+//创建连接后保存
+export function insertLink(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/insertLink',
+    method: 'post',
+    data:data
+  })
+}
+//删除连接
+export function selectNodeListByConnect(nodeip) {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectNodeListByConnect',
+    method: 'get',
+    params:{
+      nodeIp:nodeip
+    }
+  })
+}
+//删除连接
+export function deleteLink(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/deleteLink',
+    method: 'post',
+    data:data
+  })
+}
+//新增用户
+export function userinsertUser(data) {
+  return request({
+    url:baseURL+'/api/v1/user/insertUser',
+    method: 'post',
+    data:data
+  })
+}
+//告警配置修改线
+export function updateLinkAlarmConfigByIpAndPort(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/updateLineAlarmConfigByIpAndPort',
+    method: 'post',
+    data:data
+  })
+}
+//告警配置修点
+export function updateNodeAlarmConfigByIpAndPort(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/updateNodeAlarmConfigByIpAndPort',
+    method: 'post',
+    data:data
+  })
+}
+//远程搜索
+export function findIpAndPortByKeyword(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/findIpAndPortByKeyword',
+    method: 'get',
+    params:{
+      keyword:data
+    }
+  })
+}
+//校验ip是否重复
+export function checkIpUniq(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/checkIpUniq',
+    method: 'get',
+    params:{
+      nodeIp:data
+    }
+  })
+}
+//节点信息
+export function selectNodeInfo(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectNodeInfo',
+    method: 'get',
+    params:{
+      nodeIp:data
+    }
+  })
+}
+//拓扑信息
+export function selectAuthIp(data) {
+  return request({
+    url:baseURL+'/api/v1/auth/selectAuthIp',
+    method: 'get',
+    params:{
+      ip:data
+    }
+  })
+}
+//告警配置节点信息
+export function getNodeAlarmConfigByIpAndPort(data) {
+  return request({
+    url:baseURL+'/api/v1/auth28/getNodeAlarmConfigByIpAndPort',
+    method: 'get',
+    params:{
+      nodeIp:data
+    }
+  })
+}
+//线信息
+export function selectLinkInfo(fromIp,toIp) {
+  return request({
+    url:baseURL+'/api/v1/auth28/selectLinkInfo',
+    method: 'get',
+    params:{
+      fromIp:fromIp,
+      toIp:toIp
+    }
+  })
+}
+//告警线信息
+export function getLineAlarmConfigByIpAndPort(fromIp,toIp) {
+  return request({
+    url:baseURL+'/api/v1/auth28/getLineAlarmConfigByIpAndPort',
+    method: 'get',
+    params:{
+      fromIp:fromIp,
+      toIp:toIp
+    }
+  })
+}
+// 点击机器查询； -认证
+export function clickNodeSelectEcharts_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectNodeDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIp: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击机器查询； -认证
+export function clickNodeSelectEcharts_renzhengIp(data) {
+  return request({
+    url: baseURL + '/api/v1/auth/selectAuthDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIp: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击机器查询； -二维码
+export function clickNodeSelectEcharts_erCode(data) {
+  return request({
+    url: baseURL + '/api/v1/qrCodeVerify28/selectNodeDataByTimeAndIp',
+    method: 'get',
+    params: {
+      serverIpName: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}
+// 点击线查询数据（折线图） -- 认证;
+export function clickLineSelectEcharts_renzheng(data) {
+  return request({
+    url: baseURL + '/api/v1/auth28/selectTcpFlowByIpAndTime',
+    method: 'get',
+    params: {
+      serverIp: data.clientIpName,
+      clientIp: data.serverIpName,
+      startTime: data.startTime,
+      type: data.type
+    }
+  })
+}

src/common.js

+import {mapGetters} from "vuex";
+import Vue from "vue";
+import GLOABL from './global_variable'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+export default{
+  computed: {
+    ...mapGetters([
+      'name',
+      'role',
+      'token',
+      'key',
+    ])
+  },
+
+  install(Vue,options){
+    Vue.prototype.url= "http://www.baidu.com/"   //可以自定义变量
+    Vue.prototype.myFun = function (ev) { //给自定义方法起个名
+      ev + 1;
+      return ev;
+    }
+
+
+    Vue.http.interceptors.push(function ( request, next ) {
+      // console.log(request)//附赠一个可以控制页面所有路由开始之前结束之后的方法
+      // 请求发送前的处理逻辑
+      // if(request.url !== GLOABL.baseURL+'/nacos/v1/ns/getToken'&& request.url !== GLOABL.baseURL+'/nacos/v1/ns/queryAllHistory' && request.url !== GLOABL.baseURL+'/nacos/v1/ns/getSerStatistics'){
+      if(request.url !== GLOABL.baseURL+'/nacos/v1/ns/getToken'){
+        next(function (response) {
+          // 请求发送后的处理逻辑
+          // 更具请求的状态， response参数会返回给 successCallback或errorCallback
+          // if(response.data.sign === 'false'){
+          //   var username;
+          //   var localToken;
+          //   if(this.token!==null){
+          //     if(this.token.username === null){
+          //       username = JSON.parse(this.token).username;
+          //       Vue.http.headers.common['token'] = JSON.parse(this.token).token;
+          //       localToken = JSON.parse(this.token);
+          //     }else{
+          //       username = this.token.username;
+          //       Vue.http.headers.common['token'] = this.token.token;
+          //       localToken = this.token;
+          //     }
+          //   }
+          //
+          //   var data = {
+          //     username: username
+          //   }
+          //   var json = JSON.stringify(data);
+          //   this.$http.post(this.url+'/nacos/v1/ns/getToken',json,{emulateJSON:true}).then( function(res) {
+          //     if(res.data.sign!=='false'){
+          //      var msg = {
+          //         username:localToken.username,
+          //         password:localToken.password,
+          //         role:localToken.role,
+          //         token:res.data.longToken,
+          //         shrotToken:res.data.shrotToken,
+          //       }
+          //       console.log(msg)
+          //       this.$store.dispatch('user/setNewToken', msg).then(() => {
+          //         Vue.http.headers.common['token'] = res.data.shrotToken;
+          //         this.$http.post(request.url,request.body,{emulateJSON:true}).then( function(res) {
+          //           console.log(res)
+          //         })
+          //       })
+          //
+          //     }else{
+          //       // console.log("longToken失效更新")
+          //       // this.$message({
+          //       //   message: '登录超时，请重新登录',
+          //       //   type: 'error',
+          //       //   offset:80,
+          //       // });
+          //       // this.$store.dispatch('user/logout')
+          //       // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+          //     }
+          //
+          //   })
+          // }
+          if(response.data.sign === 'false'){
+             this.$store.dispatch('user/logout')
+            this.$router.push('/login')
+            this.$message({
+              message: 'token失效，请重新登录',
+              type: 'error',
+              offset:80,
+            });
+          }
+          return response
+        });
+
+      }
+
+    });
+  }
+}

src/components/Breadcrumb/index.vue

+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import pathToRegexp from 'path-to-regexp'
+
+export default {
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  created() {
+    this.getBreadcrumb()
+  },
+  methods: {
+    getBreadcrumb() {
+      // only show routes with meta.title
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+      }
+
+      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+    },
+    isDashboard(route) {
+      const name = route && route.name
+      if (!name) {
+        return false
+      }
+      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+    },
+    pathCompile(path) {
+      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+      const { params } = this.$route
+      var toPath = pathToRegexp.compile(path)
+      return toPath(params)
+    },
+    handleLink(item) {
+      const { redirect, path } = item
+      if (redirect) {
+        this.$router.push(redirect)
+        return
+      }
+      this.$router.push(this.pathCompile(path))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/Global.vue

+<script>
+  const serverSrc='www.baidu.com';
+  const token='12345678';
+  const hasEnter=false;
+  const userSite="中国钓鱼岛";
+  export default
+  {
+    userSite,//用户地址
+    token,//用户token身份
+    serverSrc,//服务器地址
+    hasEnter,//用户登录状态
+  }
+</script>

src/components/Hamburger/index.vue

+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <!--<svg-->
+      <!--:class="{'is-active':isActive}"-->
+      <!--class="hamburger"-->
+      <!--viewBox="0 0 1024 1024"-->
+      <!--xmlns="http://www.w3.org/2000/svg"-->
+      <!--width="64"-->
+      <!--height="64"-->
+    <!--&gt;-->
+      <!--<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />-->
+    <!--</svg>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Hamburger',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    toggleClick() {
+      this.$emit('toggleClick')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/Loading/Loading.vue

+<template>
+  <div style="width:100%;height:100%;z-index:999999;display: flex;justify-content: center;align-items: center">
+      <div>
+        <div class="demo1"></div>
+        <div class="demo1"></div>
+        <div class="demo1"></div>
+        <div class="demo1"></div>
+        <div class="demo1"></div>
+      </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'customerLoading'
+  }
+</script>
+
+<style scoped>
+  .demo1 {
+    width: 10px;
+    height: 40px;
+    border-radius: 10px;
+    background: #68b2ce;
+    float: left;
+    margin: 0 10px;
+    animation: demo1 linear 1s infinite;
+    -webkit-animation: demo1 linear 1s infinite;
+
+  }
+
+  .demo1:nth-child(1) {
+     animation-delay: 0.05s;
+
+  }
+
+  .demo1:nth-child(2) {
+     animation-delay: 0.1s;
+
+  }
+
+  .demo1:nth-child(3) {
+     animation-delay: 0.2s;
+
+  }
+
+  .demo1:nth-child(4) {
+     animation-delay: 0.3s;
+  }
+
+  .demo1:nth-child(5) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes demo1 {
+    0%, 60%, 100% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(2.5);
+    }
+  }
+
+  @-webkit-keyframes demo1 {
+    0%, 60%, 100% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(2.5);
+    }
+  }
+</style>

src/components/SvgIcon/index.vue

+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

src/css/index.css

+/*自定义字体*/
+/*@font-face {*/
+  /*font-family: 'yuantixi';*/
+  /*src: url("./Branding-Light.otf");*/
+  /*font-weight: normal;*/
+  /*font-style: normal;*/
+/*}*/
+@font-face {
+  font-family: 'yuanticu';
+  src: url("./Branding-Medium.otf");
+}
+@font-face {
+  font-family: "yuantixi";
+  src: url("./Branding-Light.otf");
+}
+@font-face {
+  font-family: "microyahei";
+  src: url("./微软雅黑Bold.ttf");
+  font-weight: normal;
+}
+
+
+.ant-upload-list-picture-card-container,
+.ant-upload-list-picture-card .ant-upload-list-item {
+  width: 70%;
+  height: 70%;
+}
+.distpicker-address-wrapper select {
+  width: 30%;
+}
+
+.ant-upload.ant-upload-drag {
+  height: 150px;
+}
+
+.border_corner {
+  position: absolute;
+  background-color: #7e80b1;
+}
+
+/* 右上靠上 */
+
+.border_corner:nth-child(1) {
+  width: 30px;
+  height: 3px;
+  right: -2px;
+  top: -2px;
+}
+
+/* 右上靠右 */
+
+.border_corner:nth-child(2) {
+  width: 3px;
+  height: 30px;
+  right: -2px;
+  top: -2px;
+}
+
+/* 右下靠右 */
+
+.border_corner:nth-child(3) {
+  width: 3px;
+  height: 30px;
+  right: -2px;
+  bottom: -2px;
+}
+
+/* 右下靠下 */
+
+.border_corner:nth-child(4) {
+  width: 30px;
+  height: 3px;
+  right: -2px;
+  bottom: -2px;
+}
+
+/* 左下靠下 */
+
+.border_corner:nth-child(5) {
+  width: 30px;
+  height: 3px;
+  left: -2px;
+  bottom: -2px;
+}
+
+/* 左下靠左 */
+
+.border_corner:nth-child(6) {
+  width: 3px;
+  height: 30px;
+  left: -2px;
+  bottom: -2px;
+}
+
+.radar {
+  background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  border: 0.1rem solid #20ff4d;
+  overflow: hidden;
+}
+
+.radar:before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.radar:after {
+  content: ' ';
+  display: block;
+  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
+  width: 50%;
+  height: 50%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: radar-beam 4s infinite;
+  animation-timing-function: linear;
+  transform-origin: bottom right;
+  border-radius: 100% 0 0 0;
+}
+
+@keyframes radar-beam {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*表格的自定义属性;全局*/
+.ant-table-body {
+  margin: 0 !important;
+  background-color: #F3F4F9 !important;
+}
+
+/*表格的数据*/
+.thCss {
+  font-weight: normal;
+  font-size: 14px;
+  background-color: rgba(176, 255, 93, 0);
+}
+
+/*设置查询结果展示表格的数据样式*/
+.searchTableRowCss {
+  background-color: #e4ffff;
+}
+
+.theadCssSearch {
+  background-color: #99FFFF;
+  font-weight: bolder;
+  font-size: 13px;
+}
+
+/*.ant-form-item label {*/
+  /*color: white;*/
+/*}*/
+
+/*@font-face {*/
+/*font-family:'huawen';*/
+/*src: url('../font/huawen.ttf');*/
+/*font-weight: normal;*/
+/*font-style: normal;*/
+/*}*/
+
+/* 20ff4d */
+/* 二级菜单 */
+.secondaryMenu {
+  background-color: red;
+  height: 50px;
+  display: flex;
+  font-weight: bolder;
+  background-color: #333840;
+  align-items: center;
+  color: #ffffff;
+}
+
+/* 二级菜单 - 单个标签 */
+.secondaryMenu_single {
+  height: 30px;
+  background-color: #41464D;
+  display: flex;
+  border-radius: 5px;
+  justify-content: center;
+  align-items: center;
+  padding: 0 5px;
+  margin: 0 10px;
+}
+
+/* 二级菜单 - 选中的蓝色标签 */
+.secondaryMenu_single_selected {
+  width: 5px;
+  height: 20px;
+  background-color: #0576FF;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+/*  */
+.secondaryMenu_single_select {
+  width: 5px;
+  height: 20px;
+  background-color: #41464D;
+  border-radius: 5px;
+  margin-right: 5px;
+}
+
+.tableHead {
+  color: white;
+  background-color: #333840;
+  font-weight: bolder;
+  font-size: 20px;
+}
+
+.ant-btn:hover, .ant-btn:focus {
+  color: white;
+}
+
+.tableContent {
+  font-weight: bolder;
+  font-size: 13px;
+  background-color: #070836;
+  color: #ffffff;
+}
+tr{
+  color: white;
+}
+
+.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  background: #e6f7ff42;
+}
+
+.ant-table-thead {
+}
+
+.inputDivCss {
+  background-color: rgba(153, 153, 153, 0.19);
+  height: 60px;
+  display: flex;
+  align-items: center;
+}

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 Antd from 'ant-design-vue'
+import App from './App'
+import router from './router/router'
+import store from './store'
+import 'ant-design-vue/dist/antd.css'
+import VueResource from 'vue-resource'
+import ElementUI from 'element-ui';
+import 'babel-polyfill'
+import 'jquery'
+import echarts from 'echarts'
+import $ from 'jquery'
+
+Vue.prototype.$echarts = echarts
+
+import './css/index.css'
+
+Vue.config.productionTip = false
+// Vue.http.options.emulateJSON = false
+Vue.use(ElementUI);
+Vue.use(Antd)
+Vue.use(VueResource)
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => h(App)
+})

src/permission.js

+import router from './router'
+import store from './store'
+import { Message } from 'element-ui'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+
+const whiteList = ['/login'] // no redirect whitelist
+
+router.beforeEach(async(to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+
+  // determine whether the user has logged in
+  const hasToken = getToken()
+
+  if (hasToken) {
+    if (to.path === '/login') {
+      // if is logged in, redirect to the home page
+      next({ path: '/' })
+      NProgress.done()
+    } else {
+      const hasGetUserInfo = store.getters.name
+      if (hasGetUserInfo) {
+        next()
+      } else {
+        try {
+          // get user info
+          await store.dispatch('user/getInfo')
+
+          next()
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
+    }
+  } else {
+    /* has no token*/
+
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      next(`/login?redirect=${to.path}`)
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})

src/router/router.js

+import Vue from 'vue'
+import Router from 'vue-router'
+import login from '@/views/login/login'
+import home from '@/views/home/home1'
+import globalOverview from '@/views/globalOverview/globalOverview'
+import dashboard from '@/views/dashboard/dashboard'
+import topology from '@/views/topology/topology'
+import topology2 from '@/views/topology2/topology2'
+import trace from '@/views/trace/trace'
+import performanceAnalysis from '@/views/performanceAnalysis/performanceAnalysis'
+import alarm from '@/views/alarm/alarm'
+import alarmLink from '@/views/alarm/alarm_link'
+import alarmYw from '@/views/alarm/alarm_yw'
+import serviceMonitor from '@/views/serviceMonitor/serviceMonitor1'
+import configurationManagement from '@/views/configurationManagement/configurationManagement'
+import linkAlarmConfig from '@/views/configurationManagement/linkAlarmConfig'
+import serviceIP from '@/views/configurationManagement/serviceIP'
+import serviceAlarm from '@/views/configurationManagement/serviceAlarm'
+import user from '@/views/user/user'
+// import store from '@/store'
+
+Vue.use(Router)
+
+const router = new Router({
+  routes: [
+    {
+      path: '/',
+      redirect: '/globalOverview'
+      // redirect: '/serviceMonitor'
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: login
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component: home,
+      redirect: '/globalOverview',
+      children: [
+        {
+          path: '/globalOverview',
+          name: 'globalOverview',
+          component: globalOverview
+        },
+        {
+          path: '/configurationManagement',
+          name: 'configurationManagement',
+          component: configurationManagement,
+          redirect: '/configurationManagement/serviceAlarm',
+          children: [
+            {
+              path: '/configurationManagement/linkAlarmConfig',
+              name: 'linkAlarmConfig',
+              component: linkAlarmConfig
+            },
+            {
+              path: '/configurationManagement/serviceAlarm',
+              name: 'serviceAlarm',
+              component: serviceAlarm
+            },
+            {
+              path: '/configurationManagement/serviceIP',
+              name: 'serviceIP',
+              component: serviceIP
+            }
+          ]
+        },
+        {
+          path: '/dashboard',
+          name: 'dashboard',
+          component: dashboard
+        },
+        {
+          path: '/topology',
+          name: 'topology',
+          component: topology
+        },
+        {
+          path: '/topology2',
+          name: 'topology2',
+          component: topology2
+        },
+        {
+          path: '/trace',
+          name: 'trace',
+          component: trace
+        },
+        {
+          path: '/performanceAnalysis',
+          name: 'performanceAnalysis',
+          component: performanceAnalysis
+        },
+        {
+          path: '/alarm',
+          name: 'alarm',
+          component: alarm,
+          redirect: '/alarm/alarm_yw',
+          children: [
+            {
+              path: '/alarm/alarm_link',
+              name: 'alarmLink',
+              component: alarmLink
+            },
+            {
+              path: '/alarm/alarm_yw',
+              name: 'alarmYw',
+              component: alarmYw
+            }
+          ]
+        },
+        {
+          path: '/serviceMonitor',
+          name: 'serviceMonitor',
+          component: serviceMonitor
+        },
+        {
+          path: '/user',
+          name: 'user',
+          component: user
+        }
+
+      ]
+    }
+  ]
+})
+export default router

src/settings.js

+module.exports = {
+
+  title: '链路追踪系统',
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether fix the header
+   */
+  fixedHeader: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the logo in sidebar
+   */
+  sidebarLogo: true
+}

src/store/getters.js

+const getters = {
+  sidebar: state => state.app.sidebar,
+  token: state => state.user.token,
+  role: state => state.user.role,
+  sysActiveFlag: state => state.user.sysActiveFlag,
+  openItem: state => state.user.openItem,
+  name: state => state.user.name,
+  userInfoMsg: state => state.user.userInfo,
+  ReportSerialNumber: state => state.user.ReportSerialNumber,
+  searchValue: state => state.user.searchValue
+}
+export default getters

src/store/index.js

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

src/store/modules/app.js

+import Cookies from 'js-cookie'
+
+const state = {
+  sidebar: {
+    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    withoutAnimation: false
+  },
+  device: 'desktop'
+}
+
+const mutations = {
+  TOGGLE_SIDEBAR: state => {
+    state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.withoutAnimation = false
+    if (state.sidebar.opened) {
+      Cookies.set('sidebarStatus', 1)
+    } else {
+      Cookies.set('sidebarStatus', 0)
+    }
+  },
+  CLOSE_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 0)
+    state.sidebar.opened = false
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
+  TOGGLE_DEVICE: (state, device) => {
+    state.device = device
+  }
+}
+
+const actions = {
+  toggleSideBar({ commit }) {
+    commit('TOGGLE_SIDEBAR')
+  },
+  closeSideBar({ commit }, { withoutAnimation }) {
+    commit('CLOSE_SIDEBAR', withoutAnimation)
+  },
+  toggleDevice({ commit }, device) {
+    commit('TOGGLE_DEVICE', device)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/store/modules/settings.js

+import defaultSettings from '@/settings'
+
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+
+const state = {
+  showSettings: showSettings,
+  fixedHeader: fixedHeader,
+  sidebarLogo: sidebarLogo
+}
+
+const mutations = {
+  CHANGE_SETTING: (state, { key, value }) => {
+    if (state.hasOwnProperty(key)) {
+      state[key] = value
+    }
+  }
+}
+
+const actions = {
+  changeSetting({ commit }, data) {
+    commit('CHANGE_SETTING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/user.js

+import { login, logout, getInfo } from '@/api/user'
+import { getToken, setToken, removeToken ,setIsCertification,removeIsCertification} from '@/utils/auth'
+
+
+const getDefaultState = () => {
+  return {
+    token: getToken(),
+    name: '',
+    role: 0,
+    openItem: [],
+    userInfo: '',
+    searchValue:'first',
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  RESET_STATE: (state) => {
+    Object.assign(state, getDefaultState())
+  },
+  SET_TOKEN: (state, token) => {
+    state.token = token
+  },
+  SET_NAME: (state, name) => {
+    state.name = name
+  },
+  SET_ROLE: (state, role) => {
+    state.role = role
+  },
+  SET_OPENITEM: (state, openItem) => {
+    state.openItem = openItem
+  },
+  SET_SEARCHVALUE: (state, searchValue) => {
+    state.searchValue = searchValue
+  },
+  SET_ACTIVEFLAG: (state, sysActiveFlag) => {
+    state.sysActiveFlag = sysActiveFlag
+  },
+  SET_USERINFO: (state, userInfo) => {
+    state.userInfo = userInfo
+  }
+}
+
+const actions = {
+  // user login
+  login({ commit }, userInfo) {
+    const { username, password, isCertification} = userInfo
+    return new Promise((resolve, reject) => {
+      var token ={
+        username:username,
+        password:password,
+        isCertification:isCertification
+      }
+      commit('SET_TOKEN', token)
+      setIsCertification(isCertification)
+      setToken(token)
+      resolve()
+    })
+  },
+  active({ commit },data) {
+    return new Promise((resolve, reject) => {
+      commit('SET_ACTIVEFLAG', data)
+      resolve()
+    })
+  },
+  setUserInfo({ commit },data) {
+    return new Promise((resolve, reject) => {
+      commit('SET_USERINFO', data)
+      resolve()
+    })
+  },
+  setOpenList({ commit },data) {
+    return new Promise((resolve, reject) => {
+      commit('SET_OPENITEM', data)
+      resolve()
+    })
+  },
+  setSearchValue({ commit },data) {
+    return new Promise((resolve, reject) => {
+      commit('SET_SEARCHVALUE', data)
+      resolve()
+    })
+  },
+
+  // user logout
+  logout({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  },
+
+  // remove token
+  resetToken({ commit }) {
+    return new Promise(resolve => {
+      removeToken() // must remove  token  first
+      commit('RESET_STATE')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/utils/auth.js

+import Cookies from 'js-cookie'
+
+const TokenKey = 'linktracesystem'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/get-page-title.js

+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}

src/utils/index.js

+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+    return value.toString().padStart(2, '0')
+  })
+  return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      const str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
+    }
+  }
+  return fmt
+}
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}
+
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}

src/utils/request.js

+import axios from 'axios'
+import { getToken, removeToken } from "./auth"
+// create an axios
+const request = axios.create({
+  baseURL: '', // url = base url + request url
+  // withCredentials: true, // send cookies when cross-domain requests
+  timeout: 10000 * 3 // request timeout
+})
+request.interceptors.request.use(config => {
+  config.headers.token = getToken()
+  return config
+})
+request.interceptors.response.use(response => {
+  if (response.data.code === '510') {
+    removeToken()
+  }
+  return response
+})
+export default request

src/utils/time.js

+export function formatDate(date, fmt) {
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      const str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
+    }
+  }
+  return fmt
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}

src/utils/validate.js

+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}

src/views/alarm/alarm.vue

+<template>
+  <div :style="[{ minHeight: clientHeight + 'px' },{background: '#070836' },{color: '#ffffff'}]">
+    <!-- 二级菜单 -->
+    <a-row class="secondaryMenu">
+      <!-- 二级菜单的小标签 -->
+      <router-link to="/alarm/alarm_yw">
+        <div class="secondaryMenu_single" @click="clickYwAlarm()">
+          <div :class="alarmYwSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+          <span
+            :style="[{'cursor': alarmYwSelect ? 'default':'pointer'},{'color': alarmYwSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">业务告警</span>
+        </div>
+      </router-link>
+      <router-link to="/alarm/alarm_link">
+        <div class="secondaryMenu_single" @click="clickLinkAlarm()">
+          <div :class="alarmLinkSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+          <span
+            :style="[{'cursor': alarmLinkSelect ? 'default':'pointer'},{'color': alarmLinkSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">链路告警</span>
+        </div>
+      </router-link>
+    </a-row>
+    <a-layout-content>
+      <a-config-provider :locale="locale">
+      <router-view></router-view>
+      </a-config-provider>
+    </a-layout-content>
+  </div>
+</template>
+<script>
+  import $ from 'jquery';
+  import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+  const clientHeight = $(window).height() - 64
+  export default {
+    name: 'alarm',
+    data() {
+      return {
+        locale: zhCN,
+        clientHeight,
+        alarmYwSelect: true,// 业务告警选中标志
+        alarmLinkSelect: false,// 链路告警选中标志
+      }
+    },
+    methods:{
+      // 点击业务告警
+      clickYwAlarm(){
+        this.alarmYwSelect = true
+        this.alarmLinkSelect = false
+      },
+      // 点击链路告警
+      clickLinkAlarm(){
+        this.alarmYwSelect = false
+        this.alarmLinkSelect = true
+      },
+    },
+    mounted(){
+      var routerPath = this.$route.path.split('/');
+      var currentPage = routerPath[routerPath.length-1];
+      if(currentPage=='alarm_link'){
+        this.clickLinkAlarm();
+      }else{
+        this.clickYwAlarm();
+      }
+    }
+  }
+</script>

src/views/alarm/alarm_link.vue

+<template>
+  <div>
+    <!-- 输入框 -->
+    <a-row class="inputDivCss">
+      <!--交易汇聚 选中输入框-->
+      <a-form-model ref="alarmInfo" :model="alarmInfo" style="margin:0 10px;" layout="inline">
+        <!--告警类型-->
+        <a-form-model-item>
+          <span style="color:white!important;">告警类型：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-select mode="multiple" placeholder="请选择告警类型" :value="selectedItems"
+                    style="min-width: 200px;max-width:600px" @change="alarmTypeChange">
+            <a-select-option v-for="(item,index) in alarmTypeList" :value="item.descName">
+              {{ item.descName }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <!--开始时间-->
+        <a-form-model-item>
+          <span style="color:white!important;">时间：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-range-picker :value="[defaultStartTime,defaultEndTime]" :format="dateFormat" show-time @change="timeChange"/>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary" @click="clickSearchBtn"> 查 询</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-row>
+    <a-row style="margin-top:20px;">
+      <a-col :span="22" :offset="1">
+        <a-spin :spinning="isLoading" :indicator="indicator">
+          <a-table :locale="locale" :columns="alarmInfoColumns" :data-source="alarmInfoData"
+                   size="large" bordered :pagination="false"
+                   :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+          </a-table>
+        </a-spin>
+      </a-col>
+    </a-row>
+    <a-pagination v-show="alarmInfoData.length>1" showQuickJumper v-model="pageParams.currentPage" :pageSizeOptions="pageSizeOptionsPage"
+                  :total="totalData" :show-total="(totalData, range) => `${totalData} 条`" show-size-changer
+                  :page-size="pageParams.pageSize" @change="changePage" @showSizeChange="showSizeChangePage"
+                  style="margin: 20px 0;text-align: center;color:white;">
+    </a-pagination>
+  </div>
+</template>
+<script>
+  import { selectLinkAlarm } from '@/api/alarm.js'
+  import { formatDate } from '@/utils/time.js'
+  import moment from 'moment';
+  const alarmInfoColumns = [
+    //编号;
+    {
+      title: '编号',
+      align: 'center',
+      width: '8%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    {
+      title: '告警名称',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'attribute_name'
+    },
+    {
+      title: '时间',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'timestamp'
+    },
+    {
+      title: '实时数',
+      align: 'center',
+      width: '5%',
+      dataIndex: 'attribute_data'
+    },
+    //告警类型;
+    {
+      title: '限制数',
+      align: 'center',
+      width: '13%',
+      dataIndex: 'alarm_data'
+    },
+    //告警时间;
+    {
+      title: '请求发起端IP',
+      align: 'center',
+      width: '13%',
+      dataIndex: 'ip_from'
+    },
+    //告警阈值;
+    {
+      title: '请求发起端名称',
+      align: 'center',
+      width: '13%',
+      dataIndex: 'server_name'
+    },
+    //当前值;
+    {
+      title: '请求接收端IP',
+      align: 'center',
+      width: '13%',
+      dataIndex: 'ip_to'
+    },
+    {
+      title: '请求接收端名称',
+      align: 'center',
+      width: '13%',
+      dataIndex: 'client_name'
+    }
+  ]
+  const alarmInfoData = []
+  const alarmTypeList = [
+    { businessType: 'auth', alarmType: 0, descName: '认证机器告警' },
+    { businessType: 'auth', alarmType: 1, descName: '认证链路告警' },
+    // { businessType: 'kaitong', alarmType: 0, descName: '开通机器告警' },
+    // { businessType: 'kaitong', alarmType: 1, descName: '开通链路告警' },
+    { businessType: 'qrcode', alarmType: 0, descName: '二维码机器告警' },
+    { businessType: 'qrcode', alarmType: 1, descName: '二维码链路告警' },
+    // { businessType: 'churujing', alarmType: 0, descName: '出入境机器告警' },
+    // { businessType: 'churujing', alarmType: 1, descName: '出入境链路告警' }
+  ]
+  const alarmInfo = {
+    alarmTpyeList: {
+      auth: [],
+      kaitong: [],
+      qrcode: [],
+      churujing: []
+    },//
+    startTime: '',// 开始时间
+    endTime: '',// 结束时间
+    currentPage: '1',// 当前页
+    pageCount: '20'// 每页条数
+  }
+  export default {
+    data() {
+      return {
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        defaultStartTime: '',defaultEndTime: '',
+        locale: {
+          emptyText: '暂无数据'
+        },
+        isLoading: true,
+        dateFormat: 'YYYY-MM-DD HH:mm',
+        pageParams: {
+          currentPage: 1,
+          pageSize: 10
+        },
+        pageSizeOptionsPage: ['10', '20', '30', '40', '50'],
+        totalData: 0,
+        alarmInfo,
+        selectedItems: [],
+        alarmTypeList,
+        alarmInfoColumns,
+        alarmInfoData
+      }
+    },
+    methods: {
+      moment,
+      // 告警类型
+      alarmTypeChange(selectedItems) {
+        this.alarmInfo.alarmTpyeList.auth = []
+        this.alarmInfo.alarmTpyeList.kaitong = []
+        this.alarmInfo.alarmTpyeList.qrcode = []
+        this.alarmInfo.alarmTpyeList.churujing = []
+        this.selectedItems = selectedItems
+        for (var i = 0; i < selectedItems.length; i++) {
+          for (var j = 0; j < this.alarmTypeList.length; j++) {
+            if (this.alarmTypeList[j].descName == selectedItems[i]) {
+              switch (this.alarmTypeList[j].businessType) {
+                case 'auth':
+                  this.alarmInfo.alarmTpyeList.auth.push(this.alarmTypeList[j].alarmType)
+                  break
+                case 'kaitong':
+                  this.alarmInfo.alarmTpyeList.kaitong.push(this.alarmTypeList[j].alarmType)
+                  break
+                case 'qrcode':
+                  this.alarmInfo.alarmTpyeList.qrcode.push(this.alarmTypeList[j].alarmType)
+                  break
+                case 'churujing':
+                  this.alarmInfo.alarmTpyeList.churujing.push(this.alarmTypeList[j].alarmType)
+                  break
+              }
+            }
+          }
+        }
+      },
+      // 时间选择触发
+      timeChange(date, dateString) {
+        this.defaultStartTime =  date[0],
+        this.defaultEndTime = date[1]
+        this.alarmInfo.startTime = dateString[0]
+        this.alarmInfo.endTime = dateString[1]
+      },
+      // 点击 查询 按钮;
+      clickSearchBtn() {
+        this.isLoading = true
+        if (this.alarmInfo.startTime == '') {
+          this.$message.error('时间不能是空')
+          this.isLoading = false
+        } else {
+          this.alarmInfo.currentPage = 1
+          this.pageParams.currentPage=1
+          this.alarmInfo.pageCount = this.pageParams.pageSize
+          // 查询
+          selectLinkAlarm(this.alarmInfo).then((response) => {
+            this.isLoading = false
+            this.totalData = response.data.allCount
+            this.alarmInfoData = response.data.alarmInfo
+          })
+        }
+      },
+      // 点击 查询 按钮;
+      checkPage() {
+        this.isLoading = true
+        if (this.alarmInfo.startTime == '') {
+          this.$message.error('时间不能是空')
+          this.isLoading = false
+        } else {
+          this.alarmInfo.currentPage = this.pageParams.currentPage
+          this.alarmInfo.pageCount = this.pageParams.pageSize
+          // 查询
+          selectLinkAlarm(this.alarmInfo).then((response) => {
+            this.isLoading = false
+            this.totalData = response.data.allCount
+            this.alarmInfoData = response.data.alarmInfo
+          })
+        }
+      },
+      // 分页
+      // 点击页码
+      changePage(val) {
+        this.pageParams.currentPage = val//给页码赋值;
+        this.checkPage()
+      },
+      // 点击每页条数
+      showSizeChangePage(current, pageSize) {
+        this.pageParams.currentPage = 1
+        this.pageParams.pageSize = pageSize
+        this.checkPage()
+      },
+      //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      }
+    },
+    mounted() {
+      //默认时间;
+      var endTime = formatDate(new Date(),'yyyy-MM-dd hh:mm');
+      var beginTime = new Date();
+      beginTime.setMilliseconds(beginTime.getMilliseconds()-1000*60*5)
+      this.alarmInfo.startTime =  formatDate(beginTime,'yyyy-MM-dd hh:mm');
+      this.alarmInfo.endTime = endTime;
+      this.defaultStartTime = moment(beginTime, 'YYYY-MM-DD hh:mm')
+      this.defaultEndTime = moment(endTime, 'YYYY-MM-DD hh:mm')
+      this.clickSearchBtn()
+    }
+  }
+
+</script>
+<style scoped>
+</style>

src/views/alarm/alarm_yw.vue

+<template>
+  <div >
+    <!-- 输入框 -->
+    <a-row class="inputDivCss">
+      <!--交易汇聚 选中输入框-->
+      <a-form-model ref="alarmInfo" :model="alarmInfo" style="margin:0 10px;" layout="inline">
+        <!--告警类型-->
+        <a-form-model-item>
+          <span style="color:white!important;">告警类型：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-select mode="multiple" placeholder="请选择告警类型" :value="selectedItems" style="min-width: 200px;"
+                    @change="alarmTypeChange">
+            <a-select-option v-for="(item,index) in alarmTypeList" :value="item.descName">
+              {{ item.descName }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <!--用户标识-->
+        <a-form-model-item>
+          <span style="color:white!important;">用户标识：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+<!--          <a-input type="text" @change="zhuandaxie_ywzd" v-model="alarmInfo.ywzd"></a-input>-->
+
+          <a-select mode="combobox" style="width: 500px;color:black;" placeholder="请输入业务站点名称" @blur="selectNodeList(alarmInfo.ywzd)" @change="handleChange" v-model="alarmInfo.ywzd">
+            <a-select-option v-for="(item,i) in  cloneData" :key="item" >
+              {{item}}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <!--模式-->
+        <a-form-model-item>
+          <span style="color:white!important;">模式：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+<!--          <a-input type="text"  @change="zhuandaxie_mode" v-model="alarmInfo.mode"></a-input>-->
+
+          <a-select :default-value="xuanzeywms[weizhi]" v-model="alarmInfo.mode"  default-value="minute" style="min-width: 120px;color:black;">
+            <a-select-option v-for="item in xuanzeywms" :key="item">
+              {{ item }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <!--开始时间-->
+        <a-form-model-item>
+          <span style="color:white!important;">时间：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-range-picker :second-step="10" :value="[defaultStartTime,defaultEndTime]" format="YYYY-MM-DD HH:mm" show-time @change="timeChange"/>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary" @click="clickSearchBtn"> 查 询</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-row>
+    <a-row style="margin-top:20px;">
+      <a-col :span="22" :offset="1">
+        <a-spin :spinning="loading" :indicator="indicator">
+          <a-table :locale="locale" :columns="alarmInfoColumns" :data-source="alarmInfoData" size="large" bordered :pagination="false"
+                   :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+          </a-table>
+        </a-spin>
+      </a-col>
+    </a-row>
+
+    <!--分页-->
+    <a-pagination v-show="alarmInfoData.length>1" showQuickJumper v-model="pageParams.currentPage" :pageSizeOptions="pageSizeOptionsPage"
+                  :total="totalCount" :show-total="(totalCount, range) => `${totalCount} 条`" show-size-changer
+                  :page-size="pageParams.pageSize" @change="changePage" @showSizeChange="showSizeChangePage"
+                  style="margin: 20px 0;text-align: center;color:white;">
+    </a-pagination>
+  </div>
+</template>
+<script>
+  import { selectYwAlarm } from '@/api/alarm.js'
+  import { formatDate } from '@/utils/time.js'
+  import moment from 'moment';
+  import {selectModeList, selectYwzdByKeyword} from "@/api/user";
+  const alarmInfoColumns = [
+    //编号;
+    {
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    //客户端机器名称;
+    {
+      title: '用户标识',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'ywzd'
+    },
+    //业务站点名称
+
+    //告警类型;
+    {
+      title: '时间',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'timestamp'
+    },
+    //告警时间;
+
+    //告警阈值;
+    {
+      title: '限制数',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'total'
+    },
+    //当前值;
+    {
+      title: '实时数',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'counts'
+    },
+    {
+      title: '告警名称',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'alarm_type'
+    }
+  ]
+  const alarmInfoData = []
+  const alarmTypeList = [
+    { businessType: 'auth', alarmType: 'amountAlarm', descName: '认证量告警' },
+    { businessType: 'auth', alarmType: 'tokenAlarm', descName: '认证并发告警' },
+    // { businessType: 'kaitong', alarmType: 'amountAlarm', descName: '开通交易量告警' },
+    // { businessType: 'kaitong', alarmType: 'tokenAlarm', descName: '开通并发告警' }
+  ]
+  const alarmInfo = {
+    alarmTpyeList: {
+      auth: [],
+      kaitong: []
+    },//
+    ywzd: '',// 用户标识
+    mode: '',// 模式
+    startTime: '',// 开始时间
+    endTime: '',// 结束时间
+    currentPage: '1',// 当前页
+    pageCount: '20'// 每页条数
+  }
+  export default {
+    data() {
+      return {
+        secondStep: 10,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        defaultStartTime: '',defaultEndTime: '',
+        loading: true,
+        locale: {
+          emptyText: '暂无数据'
+        },
+        pageParams: {
+          currentPage: 1,
+          pageSize: 10
+        },
+        pageSizeOptionsPage: ['10', '20', '30', '40', '50'],
+        totalCount: 0,
+        alarmInfo,
+        selectedItems: [],
+        alarmTypeList,
+        alarmInfoColumns,
+        alarmInfoData,
+        cloneData:[],
+        xuanzeywms:[],
+      }
+    },
+    methods: {
+      moment,
+      handleChange(val){
+        if (val.length>=2){
+          this.alarmInfo.ywzd = val
+          selectYwzdByKeyword(val).then((response) => {
+            this.cloneData = response.data
+          })
+        }
+        if (val.length<=0){
+          this.alarmInfo.mode =''
+        }
+      },
+      selectNodeList(){
+        selectModeList(this.alarmInfo.ywzd).then((response) => {
+          var newweizhi=[];
+          for (var i=0;i<response.data.length;i++){
+            if (this.alarmInfo.ywzd == response.data[i]){
+              this.weizhi = i
+            }
+          }
+          this.xuanzeywms  =  response.data
+        })
+      },
+      //模式转大写
+      zhuandaxie_mode() {
+        this.alarmInfo.mode = this.alarmInfo.mode.toUpperCase()
+      },
+      // 用户标识转大写
+      // zhuandaxie_ywzd(){
+      //   this.alarmInfo.ywzd = this.alarmInfo.ywzd.toUpperCase()
+      // },
+      // 告警类型
+      alarmTypeChange(selectedItems) {
+        this.alarmInfo.alarmTpyeList.auth = []
+        this.alarmInfo.alarmTpyeList.kaitong = []
+        this.selectedItems = selectedItems
+        for (var i = 0; i < selectedItems.length; i++) {
+          for (var j = 0; j < this.alarmTypeList.length; j++) {
+            if (this.alarmTypeList[j].descName == selectedItems[i]) {
+              if (this.alarmTypeList[j].businessType == 'auth') {
+                this.alarmInfo.alarmTpyeList.auth.push(this.alarmTypeList[j].alarmType)
+              } else {
+                this.alarmInfo.alarmTpyeList.kaitong.push(this.alarmTypeList[j].alarmType)
+              }
+            }
+          }
+        }
+      },
+      // 时间选择触发
+      timeChange(date, dateString) {
+        this.defaultStartTime =  date[0]
+        this.defaultEndTime = date[1]
+        this.alarmInfo.startTime = dateString[0]
+        this.alarmInfo.endTime = dateString[1]
+      },
+      // 点击 查询 按钮;
+      clickSearchBtn() {
+        if (this.alarmInfo.startTime == '') {
+          this.$message.error('时间不能是空')
+        } else {
+          this.loading = true
+          this.alarmInfo.currentPage = 1
+          this.pageParams.currentPage=1
+          this.alarmInfo.pageCount = this.pageParams.pageSize
+          // 查询
+          selectYwAlarm(this.alarmInfo).then((response) => {
+            this.loading = false
+            this.totalCount = response.data.allCount
+            this.alarmInfoData = response.data.alarmInfo
+            // var result = {alarmInfo:[],allCount:300}
+            // for (var i = 0; i < this.pageParams.pageSize; i++) {
+            //   var obj = {
+            //     ywzd: this.pageParams.currentPage+'qwqe',
+            //     timestamp: 'qweq',
+            //     mode: '0x1' + i,
+            //     counts: '1231',  //实时数
+            //     total: '234',   //限制数
+            //     alarm_type: '告警' + i  //告警名称
+            //   }
+            //   result.alarmInfo.push(obj)
+            // }
+            // this.alarmInfoData = result.alarmInfo
+            // this.total = result.allCount
+          })
+        }
+      },
+      // 点击 查询 按钮;
+      checkPage() {
+        if (this.alarmInfo.startTime == '') {
+          this.$message.error('时间不能是空')
+        } else {
+          this.loading = true
+          this.alarmInfo.currentPage = this.pageParams.currentPage
+          this.alarmInfo.pageCount = this.pageParams.pageSize
+          // 查询
+          selectYwAlarm(this.alarmInfo).then((response) => {
+            this.loading = false
+            this.totalCount = response.data.allCount
+            this.alarmInfoData = response.data.alarmInfo
+            // var result = {alarmInfo:[],allCount:300}
+            // for (var i = 0; i < this.pageParams.pageSize; i++) {
+            //   var obj = {
+            //     ywzd: this.pageParams.currentPage+'qwqe',
+            //     timestamp: 'qweq',
+            //     mode: '0x1' + i,
+            //     counts: '1231',  //实时数
+            //     total: '234',   //限制数
+            //     alarm_type: '告警' + i  //告警名称
+            //   }
+            //   result.alarmInfo.push(obj)
+            // }
+            // this.alarmInfoData = result.alarmInfo
+            // this.total = result.allCount
+          })
+        }
+      },
+      // 分页
+      // 点击页码
+      changePage(val) {
+        this.pageParams.currentPage = val//给页码赋值;
+        this.checkPage()
+      },
+      // 点击每页条数
+      showSizeChangePage(current, pageSize) {
+        this.pageParams.currentPage = 1
+        this.pageParams.pageSize = pageSize
+        this.checkPage()
+      },
+      //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      }
+    },
+    mounted() {
+      this.alarmInfo.ywzd =''
+      this.alarmInfo.mode=''
+      //默认时间;
+      var endTime = formatDate(new Date(),'yyyy-MM-dd hh:mm');
+      var beginTime = new Date();
+      beginTime.setMilliseconds(beginTime.getMilliseconds()-1000*60*5)
+      this.alarmInfo.startTime = formatDate(beginTime,'yyyy-MM-dd hh:mm');
+      this.alarmInfo.endTime = endTime;
+      this.defaultStartTime = moment(beginTime, 'YYYY-MM-DD hh:mm')
+      this.defaultEndTime = moment(endTime, 'YYYY-MM-DD hh:mm')
+      this.clickSearchBtn()
+      // this.alarmInfo.startTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+      // var lastMinutes = new Date()
+      // lastMinutes.setMilliseconds(lastMinutes.getMilliseconds() - 1000 * 60 * 5)
+      // this.alarmInfo.endTime = formatDate(lastMinutes, 'yyyy-MM-dd hh:mm')
+      // this.defaultStartTime = moment(this.alarmInfo.startTime, 'YYYY-MM-DD hh:mm')
+      // this.defaultEndTime = moment(this.alarmInfo.startTime, 'YYYY-MM-DD hh:mm')
+      // this.clickSearchBtn()
+    }
+  }
+
+</script>
+<style >
+  .tableContent {
+    font-weight: bolder;
+    font-size: 13px;
+    background-color: #070836;
+    color: #ffffff;
+  }
+  .ant-calendar-time-picker-select{
+    width: 50% !important;
+  }
+  .ant-calendar-time-picker-select:nth-last-child(1){
+    display: none;
+  }
+</style>

src/views/configurationManagement/configurationManagement.vue

+<template>
+  <div :style="[{ minHeight: clientHeight + 'px' },{background: '#070836' },{color: '#ffffff'}]">
+    <!-- 二级菜单 -->
+    <a-row class="secondaryMenu">
+      <!-- 二级菜单的小标签 -->
+      <router-link to="/configurationManagement/serviceAlarm">
+        <div class="secondaryMenu_single" @click="clickYwAlarmConfig()">
+          <div :class="ywgjConfigSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+          <span
+            :style="[{'cursor': ywgjConfigSelect ? 'default':'pointer'},{'color': ywgjConfigSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">业务告警配置</span>
+        </div>
+      </router-link>
+      <router-link to="/configurationManagement/linkAlarmConfig">
+        <div class="secondaryMenu_single" @click="clickLinkTraceConfig()">
+          <div :class="linkTraceConfigSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+          <span
+            :style="[{'cursor': linkTraceConfigSelect ? 'default':'pointer'},{'color': linkTraceConfigSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">链路告警配置</span>
+        </div>
+      </router-link>
+      <router-link to="/configurationManagement/serviceIP">
+        <div class="secondaryMenu_single" @click="clickIPConfig()">
+          <div :class="linkTraceConfigSelectIP?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+          <span
+            :style="[{'cursor': linkTraceConfigSelectIP ? 'default':'pointer'},{'color': linkTraceConfigSelectIP ? 'white':'#A7AEBB'},{marginRight:'7px'}]">IP告警配置</span>
+        </div>
+      </router-link>
+    </a-row>
+    <a-layout-content>
+      <router-view></router-view>
+    </a-layout-content>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery';
+  const clientHeight = $(window).height() - 64
+  export default {
+    name: 'configuration-management',
+    data(){
+      return {
+        clientHeight,
+        ywgjConfigSelect: true,//业务告警配置选中标志
+        linkTraceConfigSelect: false,//链路告警配置选中标志
+        linkTraceConfigSelectIP:false,
+      }
+    },
+    methods:{
+      //点击业务告警配置选中;
+      clickYwAlarmConfig: function(){
+        this.ywgjConfigSelect = true;
+        this.linkTraceConfigSelect = false;
+        this.linkTraceConfigSelectIP = false
+      },
+      //点击链路告警配置选中;
+      clickLinkTraceConfig: function(){
+        this.ywgjConfigSelect = false;
+        this.linkTraceConfigSelect = true;
+        this.linkTraceConfigSelectIP = false
+      },
+      //点击ip;
+      clickIPConfig: function(){
+        this.ywgjConfigSelect = false;
+        this.linkTraceConfigSelect = false;
+        this.linkTraceConfigSelectIP=true;
+      }
+    },
+    mounted(){
+      var routerPath = this.$route.path.split('/');
+      var currentPage = routerPath[routerPath.length-1];
+      if(currentPage=='linkAlarmConfig'){
+        this.clickLinkTraceConfig();
+      }else if(currentPage=='serviceAlarm'){
+        this.clickYwAlarmConfig();
+      }else {
+        this.clickIPConfig();
+      }
+    }
+  }
+</script>

src/views/configurationManagement/linkAlarmConfig.vue

+<template >
+  <div >
+    <div v-if="flagTuxing">
+    <div style="height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;color: #555555;font-size: 12px;position:absolute;z-index:999;right:0">
+      <div style="padding-top:10px;">
+        <a-button type="primary" @click="doAction6()">新建节点</a-button>
+        <a-button type="primary" @click="save()">保存</a-button>
+      </div>
+    </div>
+  <div >
+    <div ref="myPage" style="height:calc(100vh - 50px);" @click="isShowNodeMenuPanel = false">
+      <SeeksRelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick">
+        <div slot="node" slot-scope="{node}">
+          <div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;"  @click="showNodeMenus123(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)">
+            <!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
+            <img style="width:100%;height:auto;border-radius:50%" src="http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg" />
+          </div>
+          <div style="font-size: 16px;position: absolute;width: 160px;height:25px;line-height: 25px;margin-top:25px;margin-left:-48px;text-align: center;color:#444">
+            {{ node.text }}
+          </div>
+        </div>
+      </SeeksRelationGraph>
+    </div>
+       <div v-show="isShowNodeMenuPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
+      <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">对这个节点进行操作：</div>
+      <div class="c-node-menu-item" @click.stop="doAction00($event)">告警配置</div>
+
+    </div>
+  </div>
+  </div>
+    <a-modal
+  title="提2示"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :before-close="handleClose">
+  <a-row>
+    <a-row>
+      <!-- <el-autocomplete
+      v-model="state"
+      :fetch-suggestions="querySearchAsync"
+      style="float:left;margin-top:-20px"
+      placeholder="请输入内容"
+      @select="handleSelect"
+    ></el-autocomplete> -->
+    </a-row>
+    <div style="clear:both;padding-top:20px"></div>
+    <!-- <el-col :span='2'>节点：</el-col><el-col :span='5'>{{fromNode}}</el-col> -->
+    <a-col :span='5'>连接到：</a-col>
+    <a-col :span='15' >
+     <!-- <span style="padding-right:10px" v-for="(item,i) in alreadyIp">{{item}}</span> -->
+  <a-checkbox-group
+      @change="ipChanges"
+      :options="cities"
+      style="text-align:left"
+    v-model="checkedCities11">
+  </a-checkbox-group>
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink">确 定</a-button>
+  </span>
+</a-modal>
+
+    <a-modal
+  title="删除连接"
+  :visible.sync="dialogVisible111"
+  width="30%"
+  :before-close="handleClose">
+  <a-row>
+    <a-row>
+
+    </a-row>
+    <div style="clear:both;padding-top:20px"></div>
+    <a-col :span='15' >
+  <a-checkbox-group
+      @change="ipChanges111"
+      :options="cities1111"
+      style="text-align:left"
+    v-model="checkedCities111">
+  </a-checkbox-group>
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible111 = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink111">确 定</a-button>
+  </span>
+</a-modal>
+<a-modal
+  title="远程搜索"
+  :visible.sync="dialogVisible123"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk"
+  :before-close="handleClose">
+  <a-row>
+    <a-col :span='4' style="padding-top:5px;font-size:16px">节点IP：</a-col>
+    <a-col :span='20' >
+    <a-select
+    v-model="values"
+    show-search
+     mode="combobox"
+    :token-separators="[',']"
+    style="width:100%"
+    placeholder="请输入节点名称"
+    :options="cities123"
+   @search="handleSearch"
+    @change="handleChange"
+  ></a-select>
+    </a-col>
+  </a-row>
+  <a-row style="margin-top:10px">
+    <a-col :span='4' style="padding-top:5px;font-size:16px">应用名称：</a-col>
+    <a-col :span='20'>
+      <a-input v-model="yyname" placeholder="请输入应用名称" />
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk ">取 消</a-button>
+    <a-button type="primary" @click="jiedianADD">确 定</a-button>
+  </span>
+</a-modal>
+
+<a-modal
+  title="链路告警配置"
+  :visible.sync="dialogVisible999"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk1"
+  :before-close="handleClose">
+        <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='9' style="text-align:right" >连接请求无响应次数：</a-col>
+        <a-col :span='15'>
+          <a-input v-model="connection_noresponse"></a-input>
+        </a-col>
+      </a-row>
+        <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='9' style="text-align:right">连接请求被重置次数：</a-col>
+    <a-col :span='15'>
+       <a-input v-model="connection_rst"></a-input>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='9' style="text-align:right">每秒字节数(byte)：</a-col>
+    <a-col :span='15'>
+       <a-input v-model="total_byteps"></a-input>
+    </a-col>
+  </a-row>
+    <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk1 ">取 消</a-button>
+    <a-button type="primary" @click="btnxianok">确 定</a-button>
+  </span>
+</a-modal>
+
+<a-modal
+  title="告警配置"
+  :visible.sync="dialogVisibleNode"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk2"
+  :before-close="handleClose">
+      <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='8' style="text-align:right" >重传率(%)：</a-col>
+        <a-col :span='16'>
+
+          <!-- <span>{{total_packet_retrans_rate}}</span> -->
+          <a-input v-model="total_packet_retrans_rate"></a-input>
+        </a-col>
+      </a-row>
+        <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">总字节数(byte)：</a-col>
+    <a-col :span='16'>
+      <a-input v-model="total_byte"></a-input>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">活动会话数：</a-col>
+    <a-col :span='16'>
+      <a-input v-model="alive_flow_count"></a-input>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">三次握手平均时间(s)：</a-col>
+    <a-col :span='16'>
+        <a-input v-model="tcp_three_handshake_avg_rtt"></a-input>
+
+    </a-col>
+  </a-row>
+    <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk2 ">取 消</a-button>
+    <a-button type="primary" @click="nodeclickdian">确 定</a-button>
+  </span>
+</a-modal>
+     <!--点击线-->
+      <a-row v-show="clickLineFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">客户端：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="serverIp" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">服务端：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="clientIp" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">时间：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                           @change="changeTime"/>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">类型：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+              <a-select-option v-for="type in typeList" :key="type.count">
+                {{ type.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="requstData_lineEcharts" type="primary">
+              提交
+            </a-button>
+          </a-form-model-item>
+        </a-form-model>
+        <a-button type="danger" style="position: absolute;right:30px;" @click="goback">返回</a-button>
+      </a-row>
+      <!--点击点-->
+      <a-row v-show="clickNodeEchartsFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">机器名称：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="needIds" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">时间：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                           @change="changeTime"/>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">类型：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+              <a-select-option v-for="type in typeList" :key="type.count">
+                {{ type.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="requestData_nodeEcharts" type="primary">提交</a-button>
+          </a-form-model-item>
+        </a-form-model>
+        <a-button type="danger" style="position: absolute;right:30px;" @click="goback ">返回</a-button>
+      </a-row>
+  <div>
+
+      <div v-show="clickLineFlag" >
+        <a-spin  :spinning="loading_gojs1" :indicator="indicator" >
+        <a-row type="flex" justify="space-around" style="background:rgb(7,8,54)">
+            <!--1-->
+                        <a-col :span="7" class="jyztchart">
+              <div class="title">连接请求无响应次数</div>
+              <div id="line_echarts_1" class="contentsasd"></div>
+            </a-col>
+            <!--2-->
+            <a-col :span="7" class="jyztchart">
+              <div class="title">连接请求被重置次数</div>
+              <div id="line_echarts_2" class="contentsasd"></div>
+            </a-col>
+            <!--3-->
+            <a-col :span="7" class="jyztchart">
+              <div class="title">每秒字节数</div>
+              <div id="line_echarts_3" class="contentsasd"></div>
+            </a-col>
+                        </a-row>
+          </a-spin>
+      </div>
+
+
+
+
+           <!--点击点-->
+           <div  v-show="clickNodeEchartsFlag">
+              <a-spin  :spinning="loading_gojs" :indicator="indicator" >
+                                    <a-row  type="flex" justify="space-around" style="background:rgb(7,8,54)">
+                                      <!--1-->
+                                      <a-col :span="5" class="jyztchart">
+                                        <div class="title">重传率</div>
+                                        <div id="node_echarts_1" class="contentsasd"></div>
+                                      </a-col>
+                                      <!--2-->
+                                      <a-col :span="5" class="jyztchart">
+                                        <div class="title">总字节数</div>
+                                        <div id="node_echarts_2" class="contentsasd"></div>
+                                      </a-col>
+                                      <!--3-->
+                                      <a-col :span="5" class="jyztchart">
+                                        <div class="title">活动会话数</div>
+                                        <div id="node_echarts_3" class="contentsasd"></div>
+                                      </a-col>
+                                      <!--4-->
+                                      <a-col :span="5" class="jyztchart">
+                                        <div class="title">三次握手平均时间 </div>
+                                        <div id="node_echarts_4" class="contentsasd"></div>
+                                      </a-col>
+                                    </a-row>
+                          </a-spin>
+           </div>
+
+  </div>
+
+
+  </div>
+</template>
+<script>
+ const cityOptions = ['192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101'];
+import {tuoPuTuErCode
+        ,selectNodeAndLinkList
+        ,saveNodes,
+        selectNodeListByDisconnet,
+        insertLink,
+        selectNodeListByConnect,
+        deleteLink,
+        findIpAndPortByKeyword,
+        checkIpUniq,
+        getNodeAlarmConfigByIpAndPort,
+        getLineAlarmConfigByIpAndPort,
+        clickNodeSelectEcharts_renzheng,
+        clickLineSelectEcharts_renzheng,
+        updateLinkAlarmConfigByIpAndPort,
+        updateNodeAlarmConfigByIpAndPort
+      } from "@/api/user"
+      import { formatDate } from '@/utils/time.js'
+import SeeksRelationGraph from 'relation-graph'
+import node from '@babel/register/lib/node';
+import $ from 'jquery'
+export default {
+  name: 'SeeksRelationGraphDemo',
+  components: { SeeksRelationGraph },
+  data() {
+    return {
+      indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+      loading_gojs: true,
+     clickNodeEchartsFlag: false,//点击的是线还是点判断标志
+     selectNodeData: '',//点击节点的时候所带的数据
+     selectTime: '',// 时间选择器的值；
+      selectTimeType: 'minute',// 时间选择器后面的那个类型;默认是分
+              typeList: [{ 'count': 'minute', 'name': '分' }, { 'count': 'tenMinutes', 'name': '10分' }, {
+          'count': 'hour',
+          'name': '小时'
+        }, { 'count': 'day', 'name': '天' }],
+        dateFormat: 'YYYY/MM/DD',
+        wangzhenglianluSelect: false,//网证链路
+        showEcharts: false,
+        loading_echarts: false,
+        clickLineFlag:false,
+        loading_gojs1:true,
+        renzhenglianluSelect: true,//认证链路
+      clickNodeFlag:'',
+      flagTuxing:true,
+      connection_noresponse:null,
+      connection_rst:null,
+      total_byteps:null,
+      serverIp:'',
+      clientIp:'',
+      total_packet_retrans_rate:null,
+      tcp_three_handshake_avg_rtt:null,
+      alive_flow_count:null,
+      total_byte:null,
+      yyname:'',
+      values:'',
+      cities1111:[],
+      checkedCities111:[],
+      dialogVisible111:false,
+      dialogVisibleNode:false,
+      dialogVisible999:false,
+      nodeMenuPanelPosition: { x: 0, y: 0 },
+      isShowNodeMenuPanel:false,
+      isShowCodePanel: false,
+      checkedCities: [],
+      isShowNodeTipsPanel:false,
+      checkedCities11:[],
+      cities: [],
+      addd:{
+        nodes:[],
+        links:[]
+      },
+      firstNode:'',
+      secondNode:'',
+      needIds:'',
+      deleteLink:[],
+      nodeArray:[],
+      dialogVisible:false,
+      dialogVisible123:false,
+      selectLineData:'',
+      fromNode:'',
+      linkList:[],
+      ips:'',
+      alreadyIp:[],
+      jiedianValue:'',
+      fromIpNow:'',
+      jiedianNum:0,
+      cities123:[],
+      savalink:[],
+        savalinkdelete:[],
+      finshLink:[],
+      g_loading: true,
+      demoname: '---',
+      checked_sex: '',
+      checked_isgoodman: '',
+      // rel_checkList: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
+      // all_rel_type: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
+      graphOptions: {
+        defaultNodeBorderWidth: 0,
+        defaultNodeColor: 'rgba(238, 178, 94, 1)',
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultLineShape: 1,
+        'layouts': [
+          {
+            'label': '中心布局',
+            'layoutName': 'center',
+            'layoutClassName': 'seeks-layout-force',
+          }
+        ],
+        defaultJunctionPoint: 'border',
+       "defaultLineWidth": 2,
+      "defaultNodeBorderWidth": 1,
+
+         "disableZoom": true
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+          this.initGuanXi()
+        //   this.cities123 = []
+        //  tuoPuTuErCode().then((response) => {
+        //    for(var i=0;i<response.data.length;i++){
+        //      let obj={}
+        //      obj['value'] = response.data[i]
+        //      obj['label'] = response.data[i]
+        //      this.cities123.push(obj)
+        //    }
+        //   })
+    this.demoname = this.$route.params.demoname
+          selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+
+  },
+  methods: {
+    goback(){
+      this.clickNodeEchartsFlag = false
+      this.flagTuxing = true
+      this.loading_gojs = true
+
+                selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+    },
+    goback1(){
+      this.clickLineFlag = false
+      this.flagTuxing = true
+      this.loading_gojs1 = true
+
+                selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+    },
+          //时间变化;
+      changeTime(date, dateString) {
+        this.selectTime = dateString
+      },
+          changeTimeType(e) {
+        this.selectTimeType = e
+      },
+    //点击查看图形
+        showNodeEcharts() {
+        this.dialogVisibleNode = false
+        this.selectTimeType = 'minute'
+        this.selectTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        this.requestData_nodeEcharts()
+      },
+      showNodeEcharts1(){
+        this.dialogVisible999 = false
+        this.selectTimeType = 'minute'
+        this.selectTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        this.requstData_lineEcharts()
+      },
+      requestData_nodeEcharts() {
+          this.loading_gojs = true
+        this.flagTuxing = false
+        this.loading_echarts = true
+        this.clickNodeEchartsFlag = true
+        this.clickLineFlag = false
+        this.showEcharts = true
+        var obj = {
+          serverIpName: this.needIds,
+          startTime: this.selectTime,
+          type: this.selectTimeType
+        }
+         clickNodeSelectEcharts_renzheng(obj).then((response) => {
+            this.loading_gojs = false
+            this.loading_echarts = false
+            this.showEcharts = true
+            //重传率
+            this.drawLineEcharts('node_echarts_1', response.data.total_packet_retrans_rate, response.data.totalPacketRetransRate, response.data.totalPacketRetransRateMaximum,'重传率','nobyteData')
+            //总字节数
+            this.drawLineEcharts('node_echarts_2', response.data.total_byte, response.data.totalByte, response.data.totalByteMaximum,'总字节数','byteData')
+            //活动会话数
+            this.drawLineEcharts('node_echarts_3', response.data.alive_flow_count, response.data.aliveFlowCount, response.data.aliveFlowCountMaximum,'活动会话数','nobyteData')
+            //三次握手
+            this.drawLineEcharts('node_echarts_4', response.data.tcp_three_handshake_avg_rtt, response.data.tcpThreeHandShakeAvgRtt, response.data.tcpThreeHandshakeAvgRttMaximum,'三次握手','nobyteData')
+          })
+      },
+
+            //线图请求;
+      requstData_lineEcharts() {
+        this.loading_gojs1 = true
+        this.flagTuxing = false
+        this.loading_echarts = true
+        this.clickLineFlag = true
+        this.clickNodeEchartsFlag = false
+        this.showEcharts = true
+        var obj = {
+          serverIpName: this.serverIp,
+          clientIpName: this.clientIp,
+          startTime: this.selectTime,
+          type: this.selectTimeType
+        }
+          clickLineSelectEcharts_renzheng(obj).then((response) => {
+            this.loading_gojs1 = false
+            this.loading_echarts = false
+            this.lineEchartsData = response.data
+            // 画图echarts;
+            this.drawLineEcharts('line_echarts_1', response.data.connection_noresponse, response.data.fittedCurveConnectionNoResponse, response.data.connectionNoresponseMaximum,'连接请求无响应次数','nobyteData')//连接请求无响应次数
+            this.drawLineEcharts('line_echarts_2', response.data.connection_rst, response.data.fittedCurveConnectionRst, response.data.connectionRstListMaximum,'连接请求被重置次数','nobyteData')//连接请求被重置次数
+            this.drawLineEcharts('line_echarts_3', response.data.total_byteps, response.data.fittedCurveTotalBytes, response.data.totalBytepsListMaximum,'每秒字节数','byteData')//每秒字节数
+          })
+
+      },
+          cancelOk(){
+            this.values = ''
+            this.yyname = ''
+        this.dialogVisible123 = false
+      },
+      cancelOk1(){
+        this.dialogVisible999 = false
+      },
+      btnxianok(){
+        let obj={
+          fromIp:this.serverIp,
+          toIp:this.clientIp,
+          total_byteps:this.total_byteps,
+          connection_noresponse:this.connection_noresponse,
+          connection_rst:this.connection_rst
+
+        }
+        updateLinkAlarmConfigByIpAndPort(obj).then((response) => {
+                if(response.data){
+                  this.$message.success('修改成功')
+                   this.dialogVisible999 = false
+                }
+            })
+      },
+      cancelOk2(){
+        this.dialogVisibleNode = false
+      },
+      nodeclickdian(){
+                let nodeobj={
+                nodeIp:this.needIds,
+                tcp_three_handshake_avg_rtt:this.tcp_three_handshake_avg_rtt,
+                total_byte:this.total_byte,
+                total_packet_retrans_rate:this.total_packet_retrans_rate,
+                alive_flow_count:this.alive_flow_count
+        }
+      updateNodeAlarmConfigByIpAndPort(nodeobj).then((response) => {
+                if(response.data){
+                  this.$message.success('修改成功')
+                   this.dialogVisibleNode = false
+                }
+            })
+      },
+    handleChange(val){
+      this.jiedianValue = val
+
+    },
+
+    drawLineEcharts(id, data, filter_data, gaojingdata, title,yAxistype) {
+        // 连接请求无响应次数
+        let myChart = this.$echarts.init(document.getElementById(id))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontFamily: 'Times New Roman'
+              },
+              formatter(value) {
+                if(yAxistype=='byteData'){
+                  var temp = parseInt(value)
+                  if(temp/1024<1){
+                    return temp + 'B'
+                  }else if((temp/1024)>1 && (temp/1024/1024)<1){
+                    return parseInt(temp/1024) + 'KB'
+                  }else{
+                    return parseInt(temp/1024/1024) +'M'
+                  }
+                }else{
+                  return value
+                }
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: title,
+              data: data,
+              type: 'line',
+              axisLabel:{
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                // name:"警戒线",
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  formatter() {
+                    var temp = parseInt(gaojingdata)
+                    if(temp/1024<1){
+                      return gaojingdata + 'B'
+                    }else if((temp/1024)>1 && (temp/1024/1024)<1){
+                      return parseInt(temp/1024) + 'KB'
+                    }else{
+                      return parseInt(temp/1024/1024) +'M'
+                    }
+                  },
+                  color:"red",
+                  fontSize:14
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: gaojingdata
+                }]
+              },
+              // symbol: 'none'  //取消折点圆圈
+            }, {
+              name: '拟合曲线',
+              data: filter_data,
+              type: 'line',
+              // symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+    handleSearch(val){
+    if(val.length>3){
+        this.cities123=[]
+        findIpAndPortByKeyword(val).then((response) => {
+                 for(var i=0;i<response.data.length;i++){
+                    let obj={}
+                    obj['value'] = response.data[i]
+                    obj['label'] = response.data[i]
+                    this.cities123.push(obj)
+                  }
+            })
+ }
+      //  this.jiedianValue =this.values
+    },
+    needIp(){
+             selectNodeListByDisconnet(this.needIds).then((response) => {
+                this.cities = response.data
+            })
+    },
+    querySearchAsync(){},
+    btnLink(){
+    this.finshLink= []
+    console.log(this.needIds)
+    for(var i=0;i<this.savalink.length;i++){
+        let obj={}
+        obj['fromIp']=this.needIds
+        obj['toIp'] = this.savalink[i]
+        this.finshLink.push(obj)
+    }
+    insertLink(this.finshLink).then((response) => {
+                location.reload()
+            })
+
+    this.dialogVisible = false
+
+
+    },
+    btnLink111(){
+          this.deleteLink= []
+    console.log(this.needIds)
+    for(var i=0;i<this.savalinkdelete.length;i++){
+        let obj={}
+        obj['fromIp']=this.needIds
+        obj['toIp'] = this.savalinkdelete[i]
+        this.deleteLink.push(obj)
+    }
+    deleteLink(this.deleteLink).then((response) => {
+                location.reload()
+            })
+      this.dialogVisible111 = false
+    },
+    ipChanges(val){
+      this.savalink=val
+       console.log(this.savalink)
+      // this.linkList = val
+    },
+    ipChanges111(val){
+        this.savalinkdelete = val
+    },
+    jiedianADD(){
+      var ipAndPort = this.values.split(":")
+        var pattern =/^([1-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+        var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+        var reg = ipAndPort[0].match(exp);
+        if(pattern.test(ipAndPort[1]) && reg!=null && this.yyname !=''){
+            checkIpUniq(this.values).then((response) => {
+                if(response.data.data){
+                        console.log(this.jiedianValue,this.values,"g")
+                    this.dialogVisible123 = false
+                    var graph = this.$refs.seeksRelationGraph
+                    var __graph_json_data ={
+                      nodes:[
+                      {'id':this.jiedianValue,'fixed':true,'x':50,'y':50 ,'appName':this.yyname,'text': this.jiedianValue+this.yyname, 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff','borderWidth': 3, 'innerHTML': '<div class="c-my-node2" style="background-image: url(http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg);"><div class="c-node-name2" style="color:#6cc0ff">'+this.jiedianValue+'</div></div>' }
+                    ],
+                    links:[
+                    ]
+                    }
+                    this.addd.nodes.push(__graph_json_data.nodes[0])
+
+                    graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
+                      // 这些写上当图谱初始化完成后需要执行的代码
+                    })
+                }else{
+                  this.$message.error(response.data.msg)
+                }
+             })
+
+        }else{
+          this.$message.error('请输入正确的ip端口与应用名称')
+        }
+
+
+
+
+
+    },
+    // jiedianChange(val){
+    //   this.jiedianNum++
+    //    this.jiedianValue = val
+    // },
+    handleClose(){},
+    initGuanXi(){
+          selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+          })
+    },
+    save(){
+      // console.log(this.addd)
+          saveNodes(this.addd).then((response) => {
+            if(response.data.code === 200){
+              this.$message.success(response.data.msg)
+            }
+          })
+    },
+    setGraphData() {
+//       var __graph_json_data = { 'rootId': 'N13',
+//        'nodes':
+//        [{ 'id': 'N1','fixed':true,'x':200,'y':200, 'text': '侯亮平', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014);"><div class="c-node-name2" style="color:#ff875e">侯亮平</div></div>' },
+//         { 'id': 'N2', 'fixed':true,'x':400,'y':400, 'text': '李达康', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062);"><div class="c-node-name2" style="color:#ff875e">李达康</div></div>' },
+//         { 'id': 'N3','fixed':true,'x':600,'y':200,  'text': '祁同伟', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'borderWidth': 3, 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092);"><div class="c-node-name2" style="color:#6cc0ff">祁同伟</div></div>' },
+//        ],
+//      'links': [{ 'from': 'N2', 'to': 'N1', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N2', 'to': 'N3', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N1', 'to': 'N3', 'text': '上下级', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '上下级' }},
+//           ]}
+      this.$refs.seeksRelationGraph.setJsonData(this.addd, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+        setTimeout(() => {
+          seeksRGGraph.graphSetting.layouter.stop()
+        }, 1000)
+      })
+    },
+    // onNodeClick(nodeObject, $event) {
+    //   this.nodeArray.push(nodeObject.text)
+    //   this.firstNode =  this.nodeArray[0]
+    //   this.secondNode = this.nodeArray[1]
+    //   //排除自己连自己
+    //   if(this.nodeArray.length>=2){
+    //   if(this.firstNode !== this.secondNode){
+    //      var obj={'from': this.firstNode, 'to':this.secondNode,'text':'链路', 'color': '#d2c0a5', 'fontColor': '#d2c0a5',}
+    //       this.addd.links.push(obj)
+    //       this.save()
+    //       this.$forceUpdate()
+    //       location.reload();
+    //   }
+    //   this.nodeArray=[]
+    //   }
+
+    //   console.log('onNodeClick:', nodeObject)
+    //   this.fromNode = nodeObject.text
+    //   //========================
+    //   this.fromIpNow = nodeObject.text
+    // },
+
+        onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+
+    },
+    onLineClick(lineObject, $event) {
+            // console.log('onLineClick:', lineObject.fromNode.id,lineObject.toNode.id)
+            this.serverIp = lineObject.fromNode.id
+            this.clientIp = lineObject.toNode.id
+            getLineAlarmConfigByIpAndPort(lineObject.fromNode.id,lineObject.toNode.id).then((response) => {
+            console.log(response)
+            this.connection_noresponse = response.data.connection_noresponse
+            this.connection_rst = response.data.connection_rst
+            this.total_byteps = response.data.total_byteps
+          })
+          this.clickNodeFlag = 'link'
+      this.dialogVisible999 = true
+
+    },
+   showNodeMenus123(nodeObject, $event) {
+
+      this.currentNode = nodeObject
+      var _base_position = this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus:', nodeObject,$event)
+      //通过id把x y 配置到json
+      for(var j=0;j<this.addd.nodes.length;j++){
+        if(nodeObject.id == this.addd.nodes[j].id){
+          this.addd.nodes[j].x = $event.x
+          this.addd.nodes[j].y = $event.y
+        }
+      }
+      // this.isShowNodeMenuPanel = true
+      // this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+      // this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+    },
+    showNodeMenus(nodeObject, $event) {
+      this.needIds = nodeObject.id
+      this.currentNode = nodeObject
+      var _base_position = this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus1:',nodeObject,$event)
+      this.isShowNodeMenuPanel = true
+      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+
+      //传id调取可连接的点的list
+
+    },
+    doAction(nodeobj) {
+      console.log(nodeobj)
+      this.needIp()
+      this.dialogVisible = true
+      this.isShowNodeMenuPanel = false
+    },
+    doAction00(val){
+       getNodeAlarmConfigByIpAndPort(this.needIds).then((response) => {
+            console.log(response)
+            this.total_packet_retrans_rate = response.data.total_packet_retrans_rate
+            this.total_byte = response.data.total_byte
+            this.alive_flow_count = response.data.alive_flow_count
+            this.tcp_three_handshake_avg_rtt = response.data.tcp_three_handshake_avg_rtt
+          })
+           this.clickNodeFlag = 'node'
+       this.dialogVisibleNode = true
+      this.isShowNodeMenuPanel = false
+
+    },
+    doAction11(val){
+      selectNodeListByConnect(this.needIds).then((response) => {
+            this.cities1111 = response.data
+          })
+      this.dialogVisible111 = true
+      this.isShowNodeMenuPanel = false
+    },
+    doAction1() {
+
+      var graph = this.$refs.seeksRelationGraph
+      graph.focusNodeById('N3')
+      graph.getNodeById('N3').borderColor = '#000000'
+      graph.getNodeById('N3').fontColor = '#000000'
+    },
+    doAction2() {
+      var graph = this.$refs.seeksRelationGraph
+      graph.getNodeById('N6').opacity = 0.3
+    },
+    doAction3(targetNodeId) {
+      var graph = this.$refs.seeksRelationGraph
+      var _node_8 = graph.getNodeById('N8')
+      var _target_node = graph.getNodeById(targetNodeId)
+      // 直接改变位置
+      // _node_8.x = _node_3.x - 100
+      // _node_8.y = _node_3.y
+      // 通过动画改变位置
+      animateTo(_node_8, _target_node.x - 50, _target_node.y)
+    },
+    doAction5() {
+      var graph = this.$refs.seeksRelationGraph
+      var _node_8 = graph.getNodeById('N8')
+      _node_8.width = 200
+      _node_8.height = 200
+    },
+    doAction6() {
+      this.dialogVisible123 = true
+
+    }
+  }
+}
+function animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y) {
+  if (buff_x === undefined) {
+    window.$tmp_x = x
+    window.$tmp_y = y
+    buff_x = node.x - x
+    buff_y = node.y - y
+    direction_x = buff_x < 0 ? -1 : 1
+    direction_y = buff_y < 0 ? -1 : 1
+  }
+  var _speed_x = Math.abs(node.x - x) / 20
+  var _speed_y = Math.abs(node.y - y) / 20
+  if (_speed_x < 4) _speed_x = 4
+  if (_speed_y < 4) _speed_y = 4
+  console.log('animateTo', _speed_x, _speed_y)
+  var _stop = true
+  if (direction_x === -1) {
+    if (node.x < window.$tmp_x) {
+      node.x += _speed_x
+      _stop = false
+    }
+  } else {
+    if (node.x > window.$tmp_x) {
+      node.x -= _speed_x
+      _stop = false
+    }
+  }
+  if (direction_y === -1) {
+    if (node.y < window.$tmp_y) {
+      node.y += _speed_y
+      _stop = false
+    }
+  } else {
+    if (node.y > window.$tmp_y) {
+      node.y -= _speed_y
+      _stop = false
+    }
+  }
+  if (!_stop) setTimeout(() => { animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y) }, 50)
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+  .c-my-node2{
+    border:none;
+    background-position: center center;
+    background-size: 100%;
+    height:74px;
+    width:74px;
+    border-radius: 40px;
+  }
+  .c-node-name2{
+    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
+    position: absolute;
+  }
+  .c-node-menu-item{
+  line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
+}
+.c-node-menu-item:hover{
+  background-color: rgba(66,187,66,0.2);
+}
+  * {
+    font-family: 'Microsoft YaHei' !important;
+  }
+
+  .content {
+    width: 98%;
+    margin: 20px 1%;
+    height: 700px;
+  }
+
+  /*交易状态折线图的Yangshi*/
+  .jyztchart {
+    height: 800px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+    margin-top: 20px;
+  }
+
+  .jyztchart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .jyztchart .contentsasd {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+
+</style>

src/views/configurationManagement/serviceAlarm.vue

+<template>
+  <div >
+    <!--展示所有的卡片-->
+    <div v-show="!showDetailYwzdFlag">
+      <!-- 输入框 -->
+      <a-row class="inputDivCss">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white;">请输入业务站点：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input v-model="ywzdSearchInfo" type="text"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button style="color:white!important;" @click="clickSearchBtn()" type="primary">查询</a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </a-row>
+      <!--<a-spin size="large" tip="正在加载数据" :spinning="loading_allData">-->
+        <a-spin :spinning="loading_allData" :indicator="indicator">
+        <a-row type="flex" style="width:96%;margin-left:2%;margin-top:14px;" :style="{'marginLeft':(clientWidth-150*num)/2+'px'}">
+          <div @click="searchByYwzd(item)" style="font-size: 14px;text-align: center;height: 60px;line-height: 60px;padding-left: 4px;width: 200px" class="allCard" :hoverable="true" :bordered="true"
+               v-for="(item,index) in allYwzdData" :key="index">
+            {{item}}
+          </div>
+        </a-row>
+      </a-spin>
+    </div>
+    <!--展示当前选中的卡片-->
+    <div v-show="showDetailYwzdFlag">
+      <!-- 输入框 -->
+      <a-row class="inputDivCss" style="position:relative">
+        <div style="padding-left:20px;"><h1 style="color:white;">业务站点：<font style="font-weight: bolder;color:white;">{{ywzdName}}</font></h1></div>
+        <a-button type="danger" style="position: absolute;right:20px;" @click="showDetailYwzdFlag = false">返回</a-button>
+      </a-row>
+      <a-row>
+        <a-col style="width:96%;margin-left:2%">
+          <a-spin :spinning="loadingTable" :indicator="indicator">
+            <a-table :locale="locale" style="margin-top:30px;" :columns="detailYwzdColumns" :pagination="false" :data-source="detailYwzdData" size="large" bordered :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+              <a-button style="color:white" slot="action" slot-scope="text,record" type="primary" @click="updateYwzdInfo(record)">修改</a-button>
+            </a-table>
+          </a-spin>
+        </a-col>
+      </a-row>
+    </div>
+    <!--修改选中的业务站点-->
+    <a-modal :destroyOnClose="destroyOnClose" :maskClosable="false" v-model="showUpdateYwzdDialog">
+      <template slot="title">
+        <p style="color:black;"> 参数修改:（当前站点：{{currentYwzdData.ywzd_id}}，选中模式：{{currentYwzdData.mode}}）</p>
+      </template>
+      <a-form-model ref="currentYwzdData" :model="currentYwzdData" :rules="rules" v-bind="layout">
+        <a-form-model-item style="color:black;display: flex;flex-direction: row;" has-feedback label="认证量告警百分比" prop="amount_alarm_threshold_rate">
+           <a-input  v-model="currentYwzdData.amount_alarm_threshold_rate" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="并发告警百分比" prop="token_alarm_threshold_rate">
+          <a-input v-model="currentYwzdData.token_alarm_threshold_rate" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="请求传输时间警戒线" prop="request_transport_time_line">
+          <a-input v-model="currentYwzdData.request_transport_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="响应时间告警线" prop="response_rtt_line">
+          <a-input v-model="currentYwzdData.response_rtt_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="响应传输时间警戒线" prop="response_transport_time_line">
+          <a-input v-model="currentYwzdData.response_transport_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="交易处理时间告警线" prop="trans_handle_time_line">
+          <a-input v-model="currentYwzdData.trans_handle_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="认证量告警上限" prop="amount">
+          <a-input v-model="currentYwzdData.amount" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black" has-feedback label="并发告警上限" prop="tokens">
+          <a-input v-model="currentYwzdData.tokens" type="text"/>
+        </a-form-model-item>
+      </a-form-model>
+      <template slot="footer">
+        <a-button key="back" style="color:black" @click="handleCancel('currentYwzdData')">取消</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk('currentYwzdData')">修改</a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import $ from 'jquery'
+  import { selectAllModeMsgByYwzd, selectAllYwzdFromAlarmConfiguration, updateAlarmConfiguration} from '@/api/configurationManagement.js'
+  import AButton from 'ant-design-vue/es/button/button'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  const clientWidth = $(window).width();
+  let num = parseInt(clientWidth/150);
+  const detailYwzdColumns = [
+    {
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    {
+      title: '业务站点',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'ywzd_id',
+    },
+    {
+      title: '模式',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'mode',
+    },
+    {
+      title: '认证量告警百分比',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'amount_alarm_threshold_rate',
+    },
+    {
+      title: '并发告警百分比',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'token_alarm_threshold_rate',
+    },
+    {
+      title: '请求传输时间警戒线',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'request_transport_time_line',
+    },
+    {
+      title: '响应时间告警线',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'response_rtt_line',
+    },
+    {
+      title: '响应传输时间警戒线',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'response_transport_time_line',
+    },
+    {
+      title: '交易处理时间告警线',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'trans_handle_time_line',
+    },
+    {
+      title: '认证量告警上限',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'amount',
+    },
+    {
+      title: '并发告警上限',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'tokens',
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'action',
+      scopedSlots:{customRender: 'action'},
+    },
+  ];
+  //验证-大于0小于1；
+  let validateBetween01 = (rule, value, callback) => {
+    if (value == '') {
+      callback(new Error('不能为空'));
+    } else {
+      //是否为整数;
+      if (!isNaN(Number(value))){
+        if(Number(value)>=1||Number(value)<=0){
+          callback('必须为小数：(0,1)');
+        }else{
+          callback();
+        }
+      }else{
+        callback('必须为小数：(0,1)');
+      }
+    }
+  };
+  //验证是整数;
+  let validateInteger = (rule, value, callback) => {
+    var reg = /^\+?[1-9][0-9]*$/;　　//正整数
+    if (value == '') {
+      callback(new Error('不能为空'));
+    } else {
+      //判断是不是大于零的整数;
+      if (!isNaN(Number(value))){
+        if(reg.test(value)){
+          callback();
+        }else{
+          callback('必须是正整数');
+        }
+      }else{
+        callback('必须是正整数');
+      }
+    }
+  };
+  //验证是大于零的数;
+  let validateBigger0 = (rule, value, callback) => {
+    if(value == ''){
+      callback(new Error('不能为空'));
+    }else{
+      if(!isNaN(Number(value))){
+        if(Number(value)>0){
+          callback();
+        }else{
+          callback('必须是正数');
+        }
+      }else{
+        callback('必须是正数');
+      }
+    }
+  };
+  export default {
+    components: {
+      ACol,
+      AButton },
+    name: 'service-alarm',
+    data() {
+      return {
+        destroyOnClose: true,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        locale: {
+          emptyText: '暂无数据'
+        },
+        loading_allData: true,
+        temp_ywzdSearchInfo:'',
+        num,
+        clientWidth,
+        allYwzdData: [],//所有的业务站点信息;
+        showDetailYwzdFlag: false,
+        ywzdName:'',//当前选中的业务站点;
+        detailYwzdColumns,//业务站点详情的表头;
+        detailYwzdData:[],//业务站点详情的数据;
+        loadingTable: true,
+        showUpdateYwzdDialog: false,//修改业务站点的弹窗展示控件;
+        currentYwzdData:{},//当前要修改的ywzd
+        loading: false,//修改业务站点信息btn旋转控制;
+        layout: {
+          labelCol: { span: 8 },
+          wrapperCol: { span: 14 },
+        },
+        rules:{
+          amount_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          token_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          amount:[{validator: validateInteger,trigger: 'change'}],
+          tokens:[{validator: validateInteger,trigger: 'change'}],
+          request_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_rtt_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          trans_handle_time_line:[{validator: validateBigger0,trigger: 'change'}],
+        },
+      }
+    },
+    methods: {
+      //修改确定按钮;
+      handleOk(formName){
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            // 请求接口;
+            updateAlarmConfiguration(this.currentYwzdData).then((response)=>{
+              if(response.data.success){
+                this.$message.success('修改成功');
+                this.searchByYwzd(this.ywzdName);
+              }else{
+                //后台异常请稍后重试!
+                this.$message.error('后台异常！请稍后重试');
+              }
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      //修改取消;
+      handleCancel(formName){
+        //关闭弹窗;
+        this.showUpdateYwzdDialog = false;
+        //重置表单;
+        this.$refs[formName].resetFields();
+      },
+      // 工具方法;
+      // 查询所有业务站点的信息;
+      selectAllYwzd() {
+        this.loading_allData = true
+        selectAllYwzdFromAlarmConfiguration().then((response) => {
+          this.loading_allData = false
+          var list = response.data;
+          this.allYwzdData = list.sort(function(a, b) {
+            return a.localeCompare(b, 'zh-CN', { numeric: true })
+          })
+        })
+      },
+      clickSearchBtn() {
+        if(this.ywzdSearchInfo==''){
+          this.$message.error('业务站点不能为空')
+        }else{
+          this.searchByYwzd(this.ywzdSearchInfo)
+        }
+      },
+      // 根据业务站点查询信息;
+      searchByYwzd(ywzd) {
+        this.loadingTable = true
+        this.ywzdName = ywzd;
+        var newywzd = ywzd.split('(')
+        selectAllModeMsgByYwzd(newywzd[0]).then((response) => {
+          this.loadingTable = false
+          if (response.data.success) {
+            this.showUpdateYwzdDialog = false;
+            this.showDetailYwzdFlag = true
+            //请求成功
+            this.detailYwzdData = response.data.alarmConfigurations
+          } else {
+            //请求异常;
+            this.$message.error('系统异常')
+          }
+        })
+      },
+      //修改业务站点;
+      updateYwzdInfo(record){
+        this.showUpdateYwzdDialog = true;
+        this.currentYwzdData = {...record};
+      },
+      //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      },
+    },
+    mounted() {
+      this.selectAllYwzd()
+    },
+    computed:{
+      ywzdSearchInfo:{
+        get:function(){
+          return this.temp_ywzdSearchInfo
+        },
+        set: function(val){
+          this.temp_ywzdSearchInfo = val.toUpperCase()
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  *{
+    color:black;
+  }
+  /*所有卡片*/
+  .allCard {
+    margin: 10px;
+    cursor: pointer;
+    background-color: white;
+    height: 75px;
+    line-height: 75px;
+    width:150px;
+    border-radius: 5px;
+    text-align: center;
+    /*font-weight: 600;*/
+    font-size:30px;
+    font-family: "Times New Roman";
+  }
+
+  .allCard h1 {
+    text-align: center;
+    color: black;
+  }
+</style>

src/views/configurationManagement/serviceIP.vue

+<template>
+  <div :style="[{ minHeight: clientHeight + 'px' },{background: '#070836' },{color: '#ffffff'}]">
+    <!-- 输入框 -->
+    <a-row class="inputDivCss">
+      <!--交易汇聚 选中输入框-->
+      <a-form-model ref="alarmInfo" :model="alarmInfo" style="margin:0 10px;" layout="inline">
+        <a-form-model-item>
+          <span style="color:white!important;">业务IP：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <!--          <a-input type="text" @change="zhuandaxie_ywzd" v-model="alarmInfo.ywzd"></a-input>-->
+
+          <a-input mode="combobox" style="width: 200px;color:black;" placeholder="请输入要查询的ip地址" @blur="selectNodeList(alarmInfo.ip)" @change="handleChange" v-model="alarmInfo.ip">
+          </a-input>
+        </a-form-model-item>
+
+        <a-form-model-item>
+          <a-button type="primary" @click="clickSearchBtn"> 查 询</a-button>
+          <a-button style="margin-left:10px" type="primary" @click="adduser"> 添加配置</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-row>
+      <a-modal v-model="showUpdateYwzdDialog" :destroyOnClose="destroyOnClose" :maskClosable="false"  title="新增IP业务告警配置" @cancel="cancelOk"	 @ok="handleOk">
+        <a-form-model ref="currentYwzdData" :model="currentYwzdData" :rules="rules" v-bind="layout">
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -25px"  has-feedback label="ip地址" prop="ip">
+            <a-input  v-model="currentYwzdData.ip" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="认证量告警百分比" prop="amount_alarm_threshold_rate">
+            <a-input  v-model="currentYwzdData.amount_alarm_threshold_rate" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="并发告警百分比" prop="token_alarm_threshold_rate">
+            <a-input v-model="currentYwzdData.token_alarm_threshold_rate" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="请求传输时间警戒线" prop="request_transport_time_line">
+            <a-input v-model="currentYwzdData.request_transport_time_line" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="响应时间告警线" prop="response_rtt_line">
+            <a-input v-model="currentYwzdData.response_rtt_line" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="响应传输时间警戒线" prop="response_transport_time_line">
+            <a-input v-model="currentYwzdData.response_transport_time_line" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="交易处理时间告警线" prop="trans_handle_time_line">
+            <a-input v-model="currentYwzdData.trans_handle_time_line" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="认证量告警上限" prop="amount">
+            <a-input v-model="currentYwzdData.amount" type="text"/>
+          </a-form-model-item>
+          <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="并发告警上限" prop="tokens">
+            <a-input v-model="currentYwzdData.tokens" type="text"/>
+          </a-form-model-item>
+        </a-form-model>
+        <template slot="footer">
+          <a-button key="back" style="color:black" @click="handleCancel('currentYwzdData')">取消</a-button>
+          <a-button key="submit" type="primary" :loading="loading" @click="handleOk('currentYwzdData')">添加</a-button>
+        </template>
+      </a-modal>
+    <a-modal v-model="showUpdateYwzdDialog2" :destroyOnClose="destroyOnClose" :maskClosable="false"  title="修改IP业务告警配置" @cancel="cancelOk2"	 @ok="handleOk2">
+      <a-form-model ref="currentYwzdData2" :model="currentYwzdData2" :rules="rules2" v-bind="layout">
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -25px"  has-feedback label="ip地址" prop="ip">
+          <a-input  v-model="currentYwzdData2.ip" disabled="" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="认证量告警百分比" prop="amount_alarm_threshold_rate">
+          <a-input  v-model="currentYwzdData2.amount_alarm_threshold_rate" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="并发告警百分比" prop="token_alarm_threshold_rate">
+          <a-input v-model="currentYwzdData2.token_alarm_threshold_rate" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="请求传输时间警戒线" prop="request_transport_time_line">
+          <a-input v-model="currentYwzdData2.request_transport_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="响应时间告警线" prop="response_rtt_line">
+          <a-input v-model="currentYwzdData2.response_rtt_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="响应传输时间警戒线" prop="response_transport_time_line">
+          <a-input v-model="currentYwzdData2.response_transport_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="交易处理时间告警线" prop="trans_handle_time_line">
+          <a-input v-model="currentYwzdData2.trans_handle_time_line" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="认证量告警上限" prop="amount">
+          <a-input v-model="currentYwzdData2.amount" type="text"/>
+        </a-form-model-item>
+        <a-form-model-item style="color:black;flex-direction: row;width: 50%;margin-top: -15px"  has-feedback label="并发告警上限" prop="tokens">
+          <a-input v-model="currentYwzdData2.tokens" type="text"/>
+        </a-form-model-item>
+      </a-form-model>
+      <template slot="footer">
+        <a-button key="back" style="color:black" @click="handleCancel2('currentYwzdData2')">取消</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk2('currentYwzdData2')">提交</a-button>
+      </template>
+    </a-modal>
+    <a-row style="margin-top:20px;">
+      <a-col :span="22" :offset="1">
+        <a-spin :spinning="loading" :indicator="indicator">
+          <a-table style="background-color:rgba(123,123,123,0)" :locale="locale" :columns="alarmInfoColumns" :data-source="alarmInfoData" size="large" bordered :pagination="false"
+                   :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+             <span slot="ip" slot-scope="text, record">
+                {{record.ip}}
+             </span>
+            <span slot="amount_alarm_threshold_rate" slot-scope="text, record">
+              {{record.amount_alarm_threshold_rate}}
+             </span>
+            <span slot="token_alarm_threshold_rate" slot-scope="text, record">
+                {{record.token_alarm_threshold_rate}}
+             </span>
+            <span slot="request_transport_time_line" slot-scope="text, record">
+              {{record.request_transport_time_line}}
+             </span>
+            <span slot="response_rtt_line" slot-scope="text, record">
+                {{record.response_rtt_line}}
+             </span>
+            <span slot="response_transport_time_line" slot-scope="text, record">
+              {{record.response_transport_time_line}}
+             </span>
+            <span slot="trans_handle_time_line" slot-scope="text, record">
+                {{record.trans_handle_time_line}}
+             </span>
+            <span slot="amount" slot-scope="text, record">
+              {{record.amount}}
+             </span>
+            <span slot="tokens" slot-scope="text, record">
+              {{record.tokens}}
+             </span>
+            <span slot="operation" slot-scope="text, record">
+<!--                 <a-button style="margin-left:10px" type="danger" @click="updateStatus(record.user_name,record.status)">删除</a-button>-->
+                 <a-button style="margin-left:10px" type="primary" @click="updateIp(record)">修改</a-button>
+             </span>
+          </a-table>
+        </a-spin>
+      </a-col>
+    </a-row>
+
+    <!--分页-->
+    <a-pagination showQuickJumper v-model="pageParams.currentPage" :pageSizeOptions="pageSizeOptionsPage"
+                  :total="totalCount" :show-total="(totalCount, range) => `${totalCount} 条`"
+                  :page-size="pageParams.pageSize" @change="changePage" @showSizeChange="showSizeChangePage"
+                  style="margin: 20px 0;text-align: center;color:white;">
+    </a-pagination>
+    <a-layout-content>
+      <a-config-provider :locale="locale">
+        <router-view></router-view>
+      </a-config-provider>
+    </a-layout-content>
+  </div>
+</template>
+<script>
+  import $ from 'jquery';
+  import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+  import moment from 'moment';
+  import {userList,ipAuthAlarmList, selectYwzdByKeyword,updateIpAuthConfig,updateRole,updateStatus,userinsertUser,insertAlarmConfiguration} from "@/api/user";
+  import md5 from 'js-md5'
+  import { updateAlarmConfiguration } from '@/api/configurationManagement'
+  const alarmInfoColumns = [
+    //编号;
+    {
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    //客户端机器名称;
+    // {
+    //   title: '用户名',
+    //   align: 'center',
+    //   width: '12%',
+    //   dataIndex: 'user_name'
+    // },
+    //业务站点名称
+    {
+      title: 'ip',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'ip'
+    },
+    //告警类型;
+    {
+      title: '认证告警百分比',
+      align: 'center',
+      width: '8%',
+      dataIndex: 'amount_alarm_threshold_rate'
+    },
+    //告警时间;
+    {
+      title: '并发告警百分比',
+      align: 'center',
+      width: '7%',
+      dataIndex: 'token_alarm_threshold_rate',
+    },
+    //告警阈值;
+    {
+      title: '请求传输时间告警线',
+      align: 'center',
+      width: '9%',
+      dataIndex: 'request_transport_time_line'
+    },
+    //当前值;
+    {
+      title: '响应时间告警线',
+      align: 'center',
+      width: '8%',
+      dataIndex: 'response_rtt_line'
+    },
+    //当前值;
+    {
+      title: '响应传输时间告警线',
+      align: 'center',
+      width: '9%',
+      dataIndex: 'response_transport_time_line'
+    },
+    //当前值;
+    {
+      title: '交易处理时间告警线',
+      align: 'center',
+      width: '9%',
+      dataIndex: 'trans_handle_time_line'
+    },
+    //当前值;
+    {
+      title: '认证量阈值',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'amount'
+    },
+    //当前值;
+    {
+      title: '并发量阈值',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'tokens'
+    },
+    {
+      title: '操作',
+      align: 'left',
+      width: '12%',
+      scopedSlots: { customRender: 'operation' }
+    }
+  ]
+  const alarmInfoData = []
+  const alarmTypeList = [
+    { businessType: 'auth', alarmType: 'amountAlarm', descName: '用户' },
+    { businessType: 'auth', alarmType: 'tokenAlarm', descName: '认证并发告警' },
+    // { businessType: 'kaitong', alarmType: 'amountAlarm', descName: '开通交易量告警' },
+    // { businessType: 'kaitong', alarmType: 'tokenAlarm', descName: '开通并发告警' }
+  ]
+  const alarmInfo = {
+    ip: '',// ip
+    currentPage: '1',// 当前页
+    pageCount: '20'// 每页条数
+  }
+  const clientHeight = $(window).height() - 64
+  //验证-大于0小于1；
+  let validateBetween01 = (rule, value, callback) => {
+    if (value == '') {
+      callback(new Error('不能为空'));
+    } else {
+      //是否为整数;
+      if (!isNaN(Number(value))){
+        if(Number(value)>=1||Number(value)<=0){
+          callback('必须为小数：(0,1)');
+        }else{
+          callback();
+        }
+      }else{
+        callback('必须为小数：(0,1)');
+      }
+    }
+  };
+  let validateIp = (rule, value, callback) => {
+    if (value == '') {
+      callback(new Error('不能为空'));
+    } else if(value.indexOf(":") == -1){
+      callback(new Error('请输入正确的IP+端口'));
+    }
+      var ipAndPort = value.split(":")
+      var pattern =/^([1-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+      var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+      var reg = ipAndPort[0].match(exp);
+      if(pattern.test(ipAndPort[1]) && reg!=null){
+        callback();
+      }else {
+        callback(new Error('请输入正确的IP+端口'));
+      }
+  };
+  //验证是整数;
+  let validateInteger = (rule, value, callback) => {
+    var reg = /^\+?[1-9][0-9]*$/;　　//正整数
+    if (value == '') {
+      callback(new Error('不能为空'));
+    } else {
+      //判断是不是大于零的整数;
+      if (!isNaN(Number(value))){
+        if(reg.test(value)){
+          callback();
+        }else{
+          callback('必须是正整数');
+        }
+      }else{
+        callback('必须是正整数');
+      }
+    }
+  };
+  //验证是大于零的数;
+  let validateBigger0 = (rule, value, callback) => {
+    if(value == ''){
+      callback(new Error('不能为空'));
+    }else{
+      if(!isNaN(Number(value))){
+        if(Number(value)>0){
+          callback();
+        }else{
+          callback('必须是正数');
+        }
+      }else{
+        callback('必须是正数');
+      }
+    }
+  };
+  export default {
+    name: 'user',
+    data() {
+      return {
+        currentYwzdData:{},
+        currentYwzdData2:{},
+        ipFlag:'',
+        adduserInfo:{
+          user_name:'',
+          password:'',
+          real_name:'',
+          replyPassword:'',
+          role:''
+        },
+        rules:{
+          ip:[{validator: validateIp,trigger: 'change'}],
+          amount_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          token_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          amount:[{validator: validateInteger,trigger: 'change'}],
+          tokens:[{validator: validateInteger,trigger: 'change'}],
+          request_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_rtt_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          trans_handle_time_line:[{validator: validateBigger0,trigger: 'change'}],
+        },
+        rules2:{
+          amount_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          token_alarm_threshold_rate:[{validator: validateBetween01,trigger: 'change'}],
+          amount:[{validator: validateInteger,trigger: 'change'}],
+          tokens:[{validator: validateInteger,trigger: 'change'}],
+          request_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_rtt_line:[{validator: validateBigger0,trigger: 'change'}],
+          response_transport_time_line:[{validator: validateBigger0,trigger: 'change'}],
+          trans_handle_time_line:[{validator: validateBigger0,trigger: 'change'}],
+        },
+        visible:false,
+        showUpdateYwzdDialog: false,
+        showUpdateYwzdDialog2: false,
+        locale: zhCN,
+        clientHeight,
+        alarmYwSelect: true,// 业务告警选中标志
+        alarmLinkSelect: false,// 链路告警选中标志
+        secondStep: 10,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        defaultStartTime: '',
+        defaultEndTime: '',
+        loading: true,
+        locale: {
+        emptyText: '暂无数据'
+      },
+      pageParams: {
+        currentPage: 1,
+          pageSize: 10
+      },
+      pageSizeOptionsPage: ['10', '20', '30', '40', '50'],
+        totalCount: 0,
+        alarmInfo,
+        selectedItems: [],
+        alarmTypeList,
+        alarmInfoColumns,
+        alarmInfoData,
+        cloneData:[],
+        xuanzeywms:[],
+        user:{
+        currentPage: 1,
+          pageCount: 10,
+          userName:'',
+          realName:''
+      }
+    }
+    },
+    methods:{
+      moment,
+      // 点击业务告警
+      clickYwAlarm(){
+        this.alarmYwSelect = true
+        this.alarmLinkSelect = false
+      },
+      //新增用户
+      adduser(){
+        this.showUpdateYwzdDialog = true
+      },
+      handleOk2(formName){
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            // 请求接口;
+            updateIpAuthConfig(this.currentYwzdData2).then((response)=>{
+              if(response.data.success){
+                this.$message.success('修改成功');
+                this.userList();
+                this.showUpdateYwzdDialog2=false
+                this.currentYwzdData2={}
+              }else{
+                //后台异常请稍后重试!
+                this.$message.error(response.data.msg);
+              }
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      handleOk(formName){
+        this.$refs[formName].validate(valid => {
+          if (valid) {
+            // 请求接口;
+            insertAlarmConfiguration(this.currentYwzdData).then((response)=>{
+              if(response.data.success){
+                this.$message.success('添加成功');
+                this.userList();
+                this.showUpdateYwzdDialog=false
+                this.currentYwzdData={}
+              }else{
+                //后台异常请稍后重试!
+                this.$message.error(response.data.msg);
+              }
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      //修改取消;
+      handleCancel(formName){
+        //关闭弹窗;
+        this.showUpdateYwzdDialog = false;
+        //重置表单;
+        this.$refs[formName].resetFields();
+      },
+      handleCancel2(formName){
+        //关闭弹窗;
+        this.showUpdateYwzdDialog2 = false;
+        //重置表单;
+        this.$refs[formName].resetFields();
+      },
+      updateStatus(name,val){
+        if( val == 1){
+          if (confirm('确认禁用该用户吗')){
+            updateStatus({
+              user_name:name,
+              status:0
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }else {
+          if (confirm('确认删除该配置吗')){
+            updateStatus({
+              user_name:name,
+              status:1
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }
+      },
+      updateIp(val){
+        this.showUpdateYwzdDialog2=true
+        this.currentYwzdData2=val
+      },
+      changeRole(val){
+        this.adduserInfo.role=val
+      },
+      cancelOk(){
+        this.visible = false
+      },
+      // 点击链路告警
+      clickLinkAlarm(){
+        this.alarmYwSelect = false
+        this.alarmLinkSelect = true
+      },
+      clickSearchBtn(){
+        this.userList()
+        },
+      userList(){
+        ipAuthAlarmList(this.alarmInfo).then((response) => {
+          this.loading = false
+          this.totalCount = response.data.count
+          this.alarmInfoData = response.data.userList
+        })
+      },
+      //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      },
+    },
+    mounted(){
+      var routerPath = this.$route.path.split('/');
+      var currentPage = routerPath[routerPath.length-1];
+      this.userList()
+    }
+  }
+</script>
+<style scoped>
+  *{
+    color:black;
+  }
+  /*所有卡片*/
+  .allCard {
+    margin: 10px;
+    cursor: pointer;
+    background-color: white;
+    height: 75px;
+    line-height: 75px;
+    width:150px;
+    border-radius: 5px;
+    text-align: center;
+    /*font-weight: 600;*/
+    font-size:30px;
+    font-family: "Times New Roman";
+  }
+
+  .allCard h1 {
+    text-align: center;
+    color: black;
+  }
+</style>

src/views/dashboard/dashboard.vue

+<template>
+  <div style="background:#070836;color:#ffffff;height:100vh;overflow-x:hidden">
+    <a-spin :spinning="loading" :indicator="indicator">
+    <!-- 二级菜单 -->
+    <a-row class="secondaryMenu">
+      <!-- 二级菜单的小标签 -->
+      <div class="secondaryMenu_single" @click="renzhengfuwuyibiaopan()">
+        <div :class="renzhengfuwuSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+        <span
+          :style="[{'cursor': renzhengfuwuSelect ? 'default':'pointer'},{'color': renzhengfuwuSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">认证服务</span>
+      </div>
+      <!--<div class="secondaryMenu_single" @click="clickWangzhengxiazaiyibiaopan()">
+        <div :class="wangzhengxiazaiSelect?'secondaryMenu_single_selected':'secondaryMenu_single_select'"></div>
+        <span
+          :style="[{'cursor': wangzhengxiazaiSelect ? 'default':'pointer'},{'color': wangzhengxiazaiSelect ? 'white':'#A7AEBB'},{marginRight:'7px'}]">开通服务仪表盘</span>
+      </div>-->
+    </a-row>
+    <!-- 三级菜单 -->
+    <a-row class="threeLevelMenu">
+      <!-- 三级菜单 - 单个 交易汇聚-->
+      <div class="threeLevelMenu_single">
+        <div @click="clickJiaoyihuiju()" class="threeLevelMenu_single_text"
+             :style="[{'background':jiaoyihuijuSelect ? 'rgba(153, 153, 153, 0.51)':''},{cursor:loadingEcharts?'no-drop':''}]">
+          交易汇聚
+        </div>
+        <!--选中-->
+        <div v-show="jiaoyihuijuSelect" class="threeLevelMenu_single_select"></div>
+      </div>
+      <!-- 三级菜单 - 单个  用户明细-->
+      <div class="threeLevelMenu_single">
+        <div class="threeLevelMenu_single_text" @click="clickUserDetail('clickTag')"
+             :style="[{'background':yonghumingxiSelect ? 'rgba(153, 153, 153, 0.51)':''},{cursor:loadingEcharts?'no-drop':''}]">
+          用户明细
+        </div>
+        <!--选中-->
+        <div v-show="yonghumingxiSelect" class="threeLevelMenu_single_select"></div>
+      </div>
+      <!-- 三级菜单 - 单个 交易状态-->
+      <div @click="clickJiaoyizhuangtai()" class="threeLevelMenu_single">
+        <div class="threeLevelMenu_single_text"
+             :style="[{'background':jiaoyizhuangtaiSelect ? 'rgba(153, 153, 153, 0.51)':''},{'cursor':jiaoyizhuangtaiSelect ? 'default':  ''}]">
+          交易状态
+        </div>
+        <!--选中-->
+        <div v-show="jiaoyizhuangtaiSelect" class="threeLevelMenu_single_select"></div>
+      </div>
+      <!-- 三级菜单 - 单个 交易查询-->
+      <div @click="clickJiaoyichaxun()" class="threeLevelMenu_single">
+        <div class="threeLevelMenu_single_text"
+             :style="[{'background':jiaoyichaxunSelect ? 'rgba(153, 153, 153, 0.51)':''},{'cursor':jiaoyichaxunSelect ? 'default':  ''}]">
+          交易查询
+        </div>
+        <!--选中-->
+        <div v-show="jiaoyichaxunSelect" class="threeLevelMenu_single_select"></div>
+      </div>
+    </a-row>
+    <!-- 输入框 -->
+    <a-row class="inputDivCss">
+      <!--交易汇聚 选中输入框-->
+      <div v-show="jiaoyihuijuSelect">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">请输入业务站点：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+<!--            <a-input v-model="jyhjUserFlag" type="text" style="color:black;"></a-input>-->
+            <a-select mode="combobox" style="width: 500px;color:black;" placeholder="请输入业务站点名称" @change="handleChange" v-model="jyhjUserFlag">
+              <a-select-option v-for="(item,i) in  cloneData" :key="item" >
+                {{item}}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="searchByUserFlag()" type="primary">
+              提交
+            </a-button>
+
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+      <!--用户明细 选中输入框-->
+      <div v-show="yonghumingxiSelect">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white;">请输入业务站点：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+<!--            <a-input v-model="yhmxUserFlag" type="text" style="color:black;"></a-input>-->
+            <a-select mode="combobox" style="width: 500px;color:black;" placeholder="请输入业务站点名称" @change="handleChangeTwo" v-model="yhmxUserFlag">
+              <a-select-option v-for="(item,i) in  cloneDatatwo" :key="item" >
+                {{item}}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="searchByUserFlag()" type="primary">
+              提交
+            </a-button>
+<!--            <span style="padding-left: 6px;font-size: 18px">业务站点名称:{{ywzdzhongwenming}}</span>-->
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+      <!--交易状态输入框-->
+      <div v-show="jiaoyizhuangtaiSelect">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">请输入业务站点：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select mode="combobox" style="width: 500px;color:black;" placeholder="请输入业务站点名称" @blur="shiquanjiaodian(jiaoyiStatusSearchObj.ywzd)" @change="handleChangeThree" v-model="jiaoyiStatusSearchObj.ywzd">
+              <a-select-option v-for="(item,i) in  cloneDataThree" :key="item" >
+                {{item}}
+              </a-select-option>
+            </a-select>
+<!--            <a-input style="color:black" @change="zhuandaxie" @blur="shiquanjiaodian(jiaoyiStatusSearchObj.ywzd)" v-model="jiaoyiStatusSearchObj.ywzd"-->
+<!--                     placeholder="请输入业务站点"/>-->
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">请选择模式：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select :default-value="xuanzeywms[weizhi]" v-model="jiaoyiStatusSearchObj.mode" style="min-width: 120px;color:black;">
+              <a-select-option v-for="item in xuanzeywms" :key="item">
+                {{ item }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+<!--          <a-form-model-item>-->
+<!--            <span style="color:white!important;">请输入模式：</span>-->
+<!--          </a-form-model-item>-->
+<!--          <a-form-model-item>-->
+<!--            <a-input style="color:black" @change="zhuandaxie_mode" v-model="jiaoyiStatusSearchObj.mode"-->
+<!--                     placeholder="请输入模式"/>-->
+<!--          </a-form-model-item>-->
+          <a-form-model-item>
+            <span style="color:white!important;">请选择查询时间：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-date-picker v-model="defaultTime" format="YYYY-MM-DD HH:mm" show-time @change="getSTime" placeholder="请选择查询时间"/>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">请选择时间模式：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select v-model="jiaoyiStatusSearchObj.timeType" default-value="minute" style="min-width: 120px;color:black;">
+              <!-- <a-select-option value="minute">分</a-select-option>
+              <a-select-option value="tenMinutes">10分</a-select-option>
+              <a-select-option value="hour">时</a-select-option>
+              <a-select-option value="day">天</a-select-option> -->
+              <a-select-option value="fiveminute">5分</a-select-option>
+              <a-select-option value="hour">1小时</a-select-option>
+              <a-select-option value="today">今日</a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="searchByUserFlag()" type="primary">
+              查询
+            </a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+      <!--交易查询 选中输入框-->
+      <div v-show="jiaoyichaxunSelect">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white;">请输入业务流水号：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <!--            <a-input v-model="yhmxUserFlag" type="text" style="color:black;"></a-input>-->
+            <a-input mode="combobox" style="width: 500px;color:black;" placeholder="请输入业务流水号"  v-model="ywlshFlag">
+            </a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="searchByYwlshFlag()" type="primary">
+              查询
+            </a-button>
+            <a-button @click="clearYwlsh()" type="danger" style="margin-left: 10px">
+              清空
+            </a-button>
+            <!--            <span style="padding-left: 6px;font-size: 18px">业务站点名称:{{ywzdzhongwenming}}</span>-->
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+    </a-row>
+    <!-- 表格 -->
+    <div>
+      <!-- 查询出来的数据表格 -->
+      <a-row style="margin-top:20px;" v-show="showSearchTableFlag&&jiaoyihuijuSelect">
+        <div class="table_title">查询结果：</div>
+        <a-col style="width:96%;margin-left:2%;">
+          <a-table :locale="locale" :columns="searchResultTableColumn" :pagination="false"
+                   :data-source="searchResultData" size="small" bordered :customHeaderRow="setTableHead"
+                   :rowClassName="setTableContent">
+            <span slot="ywzdName" slot-scope="text, record">
+               <div @click="clickYwzd_search(record)" style="cursor:pointer;color: #0576FF;">{{record.ywzdName}}</div>
+             </span>
+          </a-table>
+        </a-col>
+      </a-row>
+      <!--交易汇聚（总）-->
+      <div v-show="jiaoyihuijuSelect">
+          <a-row style="margin-top:20px;" >
+            <div class="table_title">交易汇聚（总）</div>
+            <a-col style="width:96%;margin-left:2%;">
+              <a-table :locale="locale" :columns="columnsTotal" :customHeaderRow="setTableHead"
+                       :rowClassName="setTableContent"
+                       :pagination="false" :data-source="totalTransactionAggregationTableData" size="small" bordered>
+              </a-table>
+            </a-col>
+          </a-row>
+          <!--交易汇聚（分）-->
+          <a-row style="margin-top:20px;">
+            <div class="table_title">交易汇聚（分）</div>
+            <a-col style="width:96%;margin-left:2%;">
+              <a-table :locale="locale" :columns="columnsSub" :data-source="tradeConvergenceSub"
+                       size="small" bordered :pagination="false"
+                       :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+             <span slot="ywzdName" slot-scope="text, record">
+               <div @click="clickYwzd(record)" style="cursor:pointer;color: #0576FF;">{{record.ywzdName}}</div>
+             </span>
+              </a-table>
+            </a-col>
+          </a-row>
+      </div>
+      <!-- 用户明细 -- 数据表格 -->
+      <a-row style="margin-top:20px;" v-show="yonghumingxiSelect">
+        <a-spin :spinning="loading_yhmx" :indicator="indicator">
+          <a-col :span="22" :offset="1">
+            <a-table :locale="locale" style="background-color:rgba(123,123,123,0)"
+                     :columns="userDetailTableColumn"
+                     :data-source="userDetailTable" size="small" bordered
+                     :pagination="false" :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+               <span slot="mode" slot-scope="text, record">
+                 <div @click="clickMode(record)" style="cursor:pointer;color: #0576FF;">{{record.mode}}</div>
+               </span>
+              <!--业务请求并发数(min)-->
+              <span slot="tradingVolume" slot-scope="text, record">{{record.tradingVolume}}
+                <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="margin-left:5px;color:red;" v-if="record.tradingVolumeSign"/>
+                <!--</a-tooltip>-->
+               <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.tradingVolumeSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!--平均交易处理时间(ms)-->
+              <span slot="transHandleTime" slot-scope="text, record">
+                 {{record.transHandleTime}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;" v-if="record.transHandleTimeSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.transHandleTimeSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!--平均响应时间(ms)-->
+              <span slot="responseRtt" slot-scope="text, record">
+                 {{record.responseRtt}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;" v-if="record.responseRttSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.responseRttSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!-- 平均响应时间(ms)是否告警标识 -->
+              <span slot="responseTime" slot-scope="text, record">
+                 {{record.responseTime}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;" v-if="record.responseRttSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.responseRttSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!-- 平均请求传输时间是否告警标识 requestTransportTimeSign-->
+              <span slot="requestTransportTime" slot-scope="text, record">
+                 {{record.requestTransportTime}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;"
+                           v-if="record.requestTransportTimeSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.requestTransportTimeSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!-- 平均响应传输时间是否告警标识 responseTransportTimeSign-->
+              <span slot="responseTransportTime" slot-scope="text, record">
+                 {{record.responseTransportTime}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;"
+                           v-if="record.responseTransportTimeSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.responseTransportTimeSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!-- 秒并发是否告警标识 secondTokensSign-->
+              <span slot="secondTokens" slot-scope="text, record">
+                 {{record.secondTokens}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;" v-if="record.secondTokensSign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop" style="color:red;margin-left:5px;" v-if="!record.secondTokensSign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+              <!-- 交易量(个)是否告警标识 totalInADaySign -->
+              <span slot="totalInADay" slot-scope="text, record">
+                 {{record.totalInADay}}
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>开始告警了</span>-->
+                  <!--</template>-->
+                   <a-icon type="close-circle" style="color:red;margin-left:5px;" v-if="record.totalInADaySign"/>
+                <!--</a-tooltip>-->
+                 <!--<a-tooltip placement="topLeft" arrow-point-at-center>-->
+                  <!--<template slot="title">-->
+                    <!--<span>关闭告警了</span>-->
+                  <!--</template>-->
+                   <!--<a-icon type="stop " style="color:red;margin-left:5px;" v-if="!record.totalInADaySign"/>-->
+                <!--</a-tooltip>-->
+            </span>
+            </a-table>
+          </a-col>
+        </a-spin>
+      </a-row>
+    </div>
+    <!--交易状态;-->
+    <div style="margin:15px 20px;" v-show="jiaoyizhuangtaiSelect">
+      <!--<a-spin size="large" tip="正在加载数据" :spinning="loadingEcharts">-->
+      <a-spin :spinning="loadingEcharts" :indicator="indicator">
+        <div v-if="flages == true"  class="spin-content">
+          <a-row type="flex" justify="space-around">
+            <a-col :span="7" class="jyztchart">
+              <div class="title">并发量</div>
+              <div class="content" id="bingfaliangid"></div>
+            </a-col>
+              <a-col :span="7" class="jyztchart">
+              <div class="title">交易处理量统计</div>
+              <div class="content" id="jiaoyichuliliangCountId"></div>
+            </a-col>
+            <a-col :span="7" class="jyztchart">
+              <div class="title">请求传输时间</div>
+              <div class="content" id="requestattrtimeid"></div>
+            </a-col>
+          </a-row>
+          <a-row type="flex" justify="space-around" style="margin-top:30px;">
+               <a-col :span="7" class="jyztchart">
+              <div class="title">响应时间</div>
+              <div class="content" id="responseTimeId"></div>
+            </a-col>
+            <a-col :span="7" class="jyztchart">
+              <div class="title">响应传输时间</div>
+              <div class="content" id="responseAttrTimeId"></div>
+            </a-col>
+            <a-col :span="7" class="jyztchart">
+              <div class="title">交易处理时间</div>
+              <div class="content" id="jiaoyichuliTimeId"></div>
+            </a-col>
+          </a-row>
+         </div>
+         <div v-else class="spin-content"  style="height:70vh">
+          <a-row type="flex" justify="space-around">
+            <a-col :span="7" class="jyztchart">
+              <div class="title">并发量</div>
+              <div class="content" id="bingfaliangid1"></div>
+            </a-col>
+            <a-col :span="7" class="jyztchart">
+              <div class="title">交易处理量统计</div>
+              <div class="content" id="jiaoyichuliliangCountId1"></div>
+            </a-col>
+          </a-row>
+        </div>
+      </a-spin>
+    </div>
+      <!-- 业务流水号查询 -- 数据表格 -->
+      <a-row style="margin-top:20px;" v-show="jiaoyichaxunSelect">
+          <a-col :span="22" :offset="1">
+            <a-table :locale="locale" style="background-color:rgba(123,123,123,0)"
+                     :columns="ywlshTableColumn"
+                     :data-source="ywlshTable" size="small" bordered
+                     :pagination="false" :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+              <!--业务请求并发数(min)-->
+              <span slot="tradingVolume" slot-scope="text, record">{{record.tradingVolume}}
+            </span>
+              <!--平均交易处理时间(ms)-->
+              <span slot="transHandleTime" slot-scope="text, record">
+                 {{record.transHandleTime}}
+            </span>
+              <!--平均响应时间(ms)-->
+              <span slot="responseRtt" slot-scope="text, record">
+                 {{record.responseRtt}}
+            </span>
+              <!-- 平均响应时间(ms)是否告警标识 -->
+              <span slot="responseTime" slot-scope="text, record">
+                 {{record.responseTime}}
+            </span>
+              <!-- 平均请求传输时间是否告警标识 requestTransportTimeSign-->
+              <span slot="requestTransportTime" slot-scope="text, record">
+                 {{record.requestTransportTime}}
+            </span>
+              <!-- 平均响应传输时间是否告警标识 responseTransportTimeSign-->
+              <span slot="responseTransportTime" slot-scope="text, record">
+                 {{record.responseTransportTime}}
+            </span>
+              <!-- 秒并发是否告警标识 secondTokensSign-->
+              <span slot="secondTokens" slot-scope="text, record">
+                 {{record.secondTokens}}
+            </span>
+              <!-- 交易量(个)是否告警标识 totalInADaySign -->
+              <span slot="totalInADay" slot-scope="text, record">
+                 {{record.totalInADay}}
+            </span>
+            </a-table>
+          </a-col>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+<script>
+  import $ from 'jquery'
+  import {
+    yibiaoJiaoyihuiju_renzheng,
+    yibiaoJiaoyihuiju_wangzheng,
+    selectByYwzdAuth,
+    userDetailRenzheng,
+    userDetailWangzheng,
+    jiaoyizhuangtaiRenzheng,
+    jiaoyizhuangtaiWangzheng,
+    selectByYwzdDownload,
+    selectYwzdName,
+    selectModeList,
+    selectYwlshInfo,
+    selectYwzdByKeyword
+  } from '@/api/user.js'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import { formatDate } from '@/utils/time.js'
+  //交易状态 - 查询
+  var jiaoyiStatusSearchObj = {
+    ywzd: '',
+    mode: '',
+    time: '',
+    timeType: ''
+  }
+
+  var check = function(i) {
+    //方法一，用三元运算符
+    var num
+    i < 10 ? num = '0' + i : num = i
+    return num
+  }
+  // const clientHeight = $(window).height() - 64
+  //交易汇聚（总）
+  const columnsTotal = [
+    {
+      key: '1',
+      title: '认证总览',
+      dataIndex: 'name',
+      scopedSlots: { customRender: 'name' },
+      align: 'center',
+      width: '8%',
+    },
+    {
+      key: '2',
+      title: '平均交易处理时间(ms)',
+      dataIndex: 'handleTime',
+      align: 'center',
+      width: '9%'
+    },
+    {
+      key: '3',
+      title: '平均响应时间(ms)',
+      dataIndex: 'responseTime',
+      align: 'center',
+      width: '9%'
+    },
+    {
+      key: '4',
+      title: '平均请求传输时间(ms)',
+      dataIndex: 'requestTime',
+      align: 'center',
+      width: '9%'
+    },
+    {
+      key: '5',
+      title: '平均响应传输时间(ms)',
+      dataIndex: 'responseRtt',
+      align: 'center',
+      width: '9%'
+    },
+    {
+      key: '6',
+      title: '交易量(个)',
+      dataIndex: 'count',
+      align: 'center',
+      width: '10%'
+    },
+    {
+      key: '7',
+      title: '交易成功次数',
+      dataIndex: 'success_num',
+      align: 'center',
+      width: '15%'
+    },
+    {
+      key: '8',
+      title: '交易失败次数',
+      dataIndex: 'fail_num',
+      align: 'center',
+      width: '15%'
+    },
+    {
+      key: '9',
+      title: '交易成功率',
+      dataIndex: 'success_rate',
+      align: 'center',
+      width: '20%'
+    }
+  ]
+  //交易汇聚（分）
+  const columnsSub = [
+    {
+      key: '1',
+      title: '编号',
+      align: 'center',
+      width: '4%',
+      customRender: (text, record, index) => `${index + 1}`
+    }, {
+      key: '2',
+      title: '业务站点名称',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'ywzdName',
+      scopedSlots: { customRender: 'ywzdName' }
+    }, {
+      key: '3',
+      title: '业务站点编号',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'tradingUnit',
+    },
+    {
+      key: '4',
+      title: '业务请求并发数（min）',
+      align: 'center',
+      width: '12%',
+      dataIndex: 'concurrencyNumber'
+    }, {
+      key: '5',
+      title: '平均交易处理时间（ms）',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'averageProcessingTime'
+    }, {
+      key: '6',
+      title: '平均响应时间（ms）',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'averageResponseTime'
+    }, {
+      key: '7',
+      title: '平均请求传输时间（ms）',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'averageRequestTransferRime'
+    }, {
+      key: '8',
+      title: '平均响应传输时间（ms）',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'averageResponseTransferRime'
+    }, {
+      key: '9',
+      title: '秒并发',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'secondToken'
+    }, {
+      key: '10',
+      title: '交易量',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'tradingVolume'
+    },
+    {
+      key: '11',
+      title: '交易成功次数',
+      dataIndex: 'success_num',
+      align: 'center',
+      width: '7%'
+    },
+    {
+      key: '12',
+      title: '交易失败次数',
+      dataIndex: 'fail_num',
+      align: 'center',
+      width: '7%'
+    },
+    {
+      key: '13',
+      title: '交易成功率',
+      dataIndex: 'success_rate',
+      align: 'center',
+      width: '8%'
+    }
+  ]
+  //查询结果;
+  const searchResultTableColumn = [
+    {
+      key: '1',
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    {
+      key: '2',
+      title: '业务站点名称',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'ywzdName',
+      scopedSlots: { customRender: 'ywzdName' }
+    },{
+      key: '3',
+      title: '业务站点编号',
+      align: 'center',
+      width: '8%',
+      dataIndex: 'ywzd',
+    }, {
+      key: '4',
+      title: '业务请求并发数（min）',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'count'
+    }, {
+      key: '5',
+      title: '平均交易处理时间（ms）',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'transhandletime'
+    }, {
+      key: '6',
+      title: '平均响应时间（ms）',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'responsertt'
+    }, {
+      key: '7',
+      title: '平均请求传输时间（ms）',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'requesttransporttime'
+    }, {
+      key: '8',
+      title: '平均响应传输时间（ms）',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'responsetransporttime'
+    }, {
+      key: '9',
+      title: '秒并发',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'secondTokens'
+    }, {
+      key: '10',
+      title: '交易量',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'count2'
+    },
+    {
+      key: '11',
+      title: '交易成功次数',
+      dataIndex: 'success_num',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      key: '12',
+      title: '交易失败次数',
+      dataIndex: 'fail_num',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      key: '13',
+      title: '交易成功率',
+      dataIndex: 'success_rate',
+      align: 'center',
+      width: '15%'
+    }
+  ]
+  //用户明细表头;
+  const userDetailTableColumn = [
+    {
+      key: '1',
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    }, {
+      key: '2',
+      title: '用户模式',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'mode',
+      key: 'mode',
+      scopedSlots: { customRender: 'mode' }
+    }, {
+      key: '3',
+      title: '业务请求并发数(min)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'tradingVolume',
+      key: 'tradingVolume',
+      scopedSlots: { customRender: 'tradingVolume' }
+    }, {
+      key: '4',
+      title: '平均交易处理时间(ms)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'transHandleTime',
+      key: 'transHandleTime',
+      scopedSlots: { customRender: 'transHandleTime' }
+    }, {
+      key: '5',
+      title: '平均响应时间(ms)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'responseRtt',
+      key: 'responseRtt',
+      scopedSlots: { customRender: 'responseRtt' }
+    }, {
+      key: '6',
+      title: '平均请求传输时间(ms)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'requestTransportTime',
+      key: 'requestTransportTime',
+      scopedSlots: { customRender: 'requestTransportTime' }
+    }, {
+      key: '7',
+      title: '平均响应传输时间(ms)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'responseTransportTime',
+      key: 'responseTransportTime',
+      scopedSlots: { customRender: 'responseTransportTime' }
+    }, {
+      key: '8',
+      title: '秒并发',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'secondTokens',
+      key: 'secondTokens',
+      scopedSlots: { customRender: 'secondTokens' }
+    }, {
+      key: '9',
+      title: '交易量(个)',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'totalInADay',
+      key: 'totalInADay',
+      scopedSlots: { customRender: 'totalInADay' }
+    }
+  ]
+  const ywlshTableColumn = [
+    {
+      key: '1',
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    }, {
+      key: '2',
+      title: 'URI',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'uri',
+      key: 'uri',
+      scopedSlots: { customRender: 'uri' }
+    }, {
+      key: '3',
+      title: '交易状态',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'httpRespStatus',
+      key: 'httpRespStatus',
+      scopedSlots: { customRender: 'httpRespStatus' }
+    }, {
+      key: '4',
+      title: '客户端IP',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'srcIp',
+      key: 'srcIp',
+      scopedSlots: { customRender: 'srcIp' }
+    }, {
+      key: '5',
+      title: '客户端端口',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'srcPort',
+      key: 'srcPort',
+      scopedSlots: { customRender: 'srcPort' }
+    }, {
+      key: '6',
+      title: '服务端IP',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'dstIp',
+      key: 'dstIp',
+      scopedSlots: { customRender: 'dstIp' }
+    }, {
+      key: '7',
+      title: '服务端端口',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'dstPort',
+      key: 'dstPort',
+      scopedSlots: { customRender: 'dstPort' }
+    }, {
+      key: '8',
+      title: '业务站点编号',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'customNumber',
+      key: 'customNumber',
+      scopedSlots: { customRender: 'customNumber' }
+    }, {
+      key: '9',
+      title: '交易开始时间',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'requestTransStart',
+      key: 'requestTransStart',
+      scopedSlots: { customRender: 'requestTransStart' }
+    }, {
+      key: '10',
+      title: '交易结束时间',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'responseTransEnd',
+      key: 'responseTransEnd',
+      scopedSlots: { customRender: 'responseTransEnd' }
+    }
+  ]
+  let timer_jiaoyihuiju = ''
+  import moment from 'moment';
+  export default {
+    components: { ACol },
+    data() {
+      return {
+        flages:true,
+        cloneData:[],
+        yhmxUserFlag:'',
+        ywlshFlag:'',
+        cloneDatatwo:[],
+        cloneDataThree:[],
+        weizhi:null,
+        xuanzeywms:[],
+        temp_yhmxInput_jyhj:'',
+        jyhjClickUserFlag:'',
+        defaultTime:'',
+        currentTime:'',
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        locale: {
+          emptyText: '暂无数据'
+        },
+        temp_ywzdInput_jyhj: '',
+        temp_ywzdInput_yhmx: '',
+        temp_ywzdInput_jyzt: '',
+        loadingEcharts: false,
+        loading:true,
+        size: 8,
+        jiaoyiStatusSearchObj,//交易状态查询对象;
+        //二级菜单的选中情况；
+        renzhengfuwuSelect: true,
+        wangzhengxiazaiSelect: false,
+        //三级菜单的选中情况;
+        jiaoyihuijuSelect: true,
+        yonghumingxiSelect: false,
+        jiaoyizhuangtaiSelect: false,
+        jiaoyichaxunSelect:false,
+        //交易状态 - 输入框 - 选择时间,
+        jiaoyizhuangtaiTime: '',
+        //交易状态 - 输入框 - 选择节点坐标,
+        //展示交易汇聚查询表格的flag;
+        timeType: 'today',
+        showSearchTableFlag: false,
+        //表格的表头数据
+        columnsTotal,
+        columnsSub,
+        searchResultTableColumn,
+        userDetailTableColumn,
+        ywlshTableColumn,
+        //交易汇聚 - 分
+        tradeConvergenceSub: [],
+        // clientHeight: clientHeight,
+        //交易汇聚 -- 总
+        totalTransactionAggregationTableData: [],
+        loading_jyhj: true,
+        //交易汇聚查询结果;
+        searchResultData: [],
+        loading_search: false,
+        //用户明细
+        userDetailTable: [],
+        //业务流水号查询
+        ywlshTable: [],
+        loading_yhmx: false,
+        ywzdzhongwenming:'',
+        jyhjUserFlag:''
+      }
+    },
+    methods: {
+      moment,
+      handleChange(val){
+        if (val.length>=2){
+          this.jyhjUserFlag = val
+          selectYwzdByKeyword(val).then((response) => {
+            this.cloneData = response.data
+          })
+        }
+
+      },
+      handleChangeTwo(val){
+        if (val.length>=2){
+          this.yhmxUserFlag = val
+          selectYwzdByKeyword(val).then((response) => {
+            this.cloneDatatwo = response.data
+          })
+        }
+
+      },
+      handleChangeThree(val){
+        if (val.length>=2){
+          this.jiaoyiStatusSearchObj.ywzd = val
+          selectYwzdByKeyword(val).then((response) => {
+            this.cloneDataThree = response.data
+          })
+        }
+
+      },
+      //业务站点转大写（交易状态）
+      shiquanjiaodian(val){
+        debugger
+        console.log(val)
+        this.jiaoyiStatusSearchObj.ywzd = this.jiaoyiStatusSearchObj.ywzd.toUpperCase()
+        selectModeList(val).then((response) => {
+          if (response.data.length>0){
+            this.xuanzeywms = response.data
+            this.xuanzeywms.push('所有模式')
+          }else{
+            this.xuanzeywms=[]
+            this.jiaoyiStatusSearchObj.mode=''
+          }
+
+        })
+      },
+      zhuandaxie() {
+        this.jiaoyiStatusSearchObj.ywzd = this.jiaoyiStatusSearchObj.ywzd.toUpperCase()
+      },
+      //模式转大写（交易状态）
+      zhuandaxie_mode() {
+        this.jiaoyiStatusSearchObj.mode = this.jiaoyiStatusSearchObj.mode.toUpperCase()
+      },
+      // 设置时间;
+      getSTime(date, dateString) {
+        this.jiaoyiStatusSearchObj.time = dateString
+      },
+      //点击模式 （用户明细）
+      clickMode(record) {
+        this.jiaoyiStatusSearchObj.ywzd = this.yhmxUserFlag.toUpperCase()
+        this.jiaoyiStatusSearchObj.mode = record.mode.toUpperCase()
+        this.clickJiaoyizhuangtai()
+        this.selectNodeList()
+      },
+      //点击业务站点（交易汇聚的行）
+      clickYwzd(record) {
+        console.log(record)
+        // this.jiaoyiStatusSearchObj.ywzd = record.tradingUnit.toUpperCase()
+        this.clickUserDetail(record.tradingUnit)
+        // selectYwzdName
+        selectYwzdName(record.tradingUnit).then((response) => {
+          this.ywzdzhongwenming = response.data
+        })
+      },
+      //点击业务站点查询
+      clickYwzd_search(record) {
+        // this.yhmxUserFlag = record.ywzd
+        // this.jiaoyiStatusSearchObj.ywzd = record.ywzd
+        this.clickUserDetail(record.ywzd)
+      },
+      //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      },
+      //点击一级菜单;
+      //认证服务仪表盘;
+      renzhengfuwuyibiaopan() {
+        this.jyhjUserFlag = ''//交易汇聚的表单置空
+        //二级菜单样式变化;
+        this.wangzhengxiazaiSelect = false
+        this.renzhengfuwuSelect = true
+        //三级菜单样式变化;
+        this.jiaoyihuijuSelect = true
+        this.yonghumingxiSelect = false
+        this.jiaoyizhuangtaiSelect = false
+        this.showSearchTableFlag = false//隐藏搜索结果显示框;
+        //点击交易汇聚;
+        this.clickJiaoyihuiju()
+      },
+      //网证下载仪表盘;
+      clickWangzhengxiazaiyibiaopan() {
+        //清空输入框；
+        this.jyhjUserFlag = ''
+        this.yhmxUserFlag = ''
+        this.jiaoyiStatusSearchObj = {
+          timeType: '',
+          ywzd: '',
+          time: '',
+          mode: ''
+        }
+        //二级菜单变化
+        this.renzhengfuwuSelect = false
+        this.wangzhengxiazaiSelect = true
+        //三级菜单变化;
+        this.jiaoyihuijuSelect = true
+        this.yonghumingxiSelect = false
+        this.jiaoyizhuangtaiSelect = false
+        this.showSearchTableFlag = false//隐藏搜索结果显示框;
+        //网证下载查询;
+        this.clickJiaoyihuiju()
+      },
+      //点击二级菜单
+      //点击交易汇聚;
+      clickJiaoyihuiju() {
+        if (this.loadingEcharts) {
+          console.log('不许点击')
+        } else {
+          this.jyhjUserFlag  = ''
+          this.yhmxUserFlag = ''
+          this.jiaoyiStatusSearchObj = {
+            timeType: '',
+            ywzd: '',
+            time: '',
+            mode: ''
+          }
+          //刷新数据;
+          this.loading_jyhj = true
+          this.totalTransactionAggregationTableData = []
+          this.tradeConvergenceSub = []
+          this.jiaoyihuijuSelect = true
+          this.yonghumingxiSelect = false
+          this.jiaoyichaxunSelect = false
+          this.jiaoyizhuangtaiSelect = false
+          if (this.renzhengfuwuSelect) {
+            //认证服务;
+            yibiaoJiaoyihuiju_renzheng().then((response) => {
+              this.loading = false
+              this.loading_jyhj = false
+              if (response.status === 200) {
+                //汇聚数据;
+                this.tradeConvergenceSub = response.data[0]//分
+                // var applicationForCertification = response.data[1][0]//认证申请;
+                // var authenticationRequest = response.data[1][1]//认证请求;
+                var authenticationRequest = response.data[1][0]//认证请求
+                //总;
+                this.totalTransactionAggregationTableData = [
+                  // {
+                  //   key: '1',
+                  //   name: applicationForCertification.authType,
+                  //   handleTime: applicationForCertification.authCollect.handleTime,
+                  //   responseTime: applicationForCertification.authCollect.responseTime,
+                  //   requestTime: applicationForCertification.authCollect.requestTime,
+                  //   responseRtt: applicationForCertification.authCollect.responseRtt,
+                  //   count: applicationForCertification.authCollect.count
+                  // },
+                  {
+                    key: '2',
+                    name: authenticationRequest.authType,
+                    handleTime: authenticationRequest.authCollect.handleTime,
+                    responseTime: authenticationRequest.authCollect.responseTime,
+                    requestTime: authenticationRequest.authCollect.requestTime,
+                    responseRtt: authenticationRequest.authCollect.responseRtt,
+                    count: authenticationRequest.authCollect.count,
+                    success_num:authenticationRequest.authCollect.success_num,
+                    fail_num:authenticationRequest.authCollect.fail_num,
+                    success_rate:authenticationRequest.authCollect.success_rate
+                  }
+                ]
+              }
+            })
+          } else {
+            //网证下载服务;
+            yibiaoJiaoyihuiju_wangzheng().then((response) => {
+              this.loading_jyhj = false
+              if (response.status === 200) {
+                //汇聚数据;
+                this.tradeConvergenceSub = response.data[0]//分
+                var applicationForCertification = response.data[1][0]//认证申请;
+                var authenticationRequest = response.data[1][1]//认证请求;
+                this.totalTransactionAggregationTableData = [
+                  {
+                    key: '1',
+                    name: applicationForCertification.authType,
+                    handleTime: applicationForCertification.downloadCTIDCollect.handleTime,
+                    responseTime: applicationForCertification.downloadCTIDCollect.responseTime,
+                    requestTime: applicationForCertification.downloadCTIDCollect.requestTime,
+                    responseRtt: applicationForCertification.downloadCTIDCollect.responseRtt,
+                    count: applicationForCertification.downloadCTIDCollect.count
+                  }, {
+                    key: '2',
+                    name: authenticationRequest.authType,
+                    handleTime: authenticationRequest.downloadCTIDCollect.handleTime,
+                    responseTime: authenticationRequest.downloadCTIDCollect.responseTime,
+                    requestTime: authenticationRequest.downloadCTIDCollect.requestTime,
+                    responseRtt: authenticationRequest.downloadCTIDCollect.responseRtt,
+                    count: authenticationRequest.downloadCTIDCollect.count
+                  }
+                ]
+              }
+            })
+          }
+        }
+      },
+      //用户明细;
+      clickUserDetail(str) {
+        if (!this.loadingEcharts) {
+          if(str == 'clickTag') {
+            this.yhmxUserFlag = ''
+          }else {
+            this.yhmxUserFlag = str
+          }
+          this.jyhjUserFlag = ''
+          this.jiaoyiStatusSearchObj = {
+            timeType: '',
+            ywzd: '',
+            time: '',
+            mode: ''
+          }
+          //所有的置空;
+          this.loading_yhmx = true
+          this.userDetailTable = []
+          //选中用户明细;隐藏其他;
+          this.jiaoyihuijuSelect = false
+          this.yonghumingxiSelect = true
+          this.jiaoyichaxunSelect = false
+          this.jiaoyizhuangtaiSelect = false
+          this.showSearchTableFlag = false
+          if (this.yhmxUserFlag != '') {
+            if (this.renzhengfuwuSelect) {
+              //认证服务
+              userDetailRenzheng(this.yhmxUserFlag).then((response) => {
+                this.loading_yhmx = false
+                this.userDetailTable = response.data
+                //展示用户明细数据;
+              })
+            } else {
+              //网证下载;
+              userDetailWangzheng(this.jyhjClickUserFlag).then((response) => {
+                //展示用户明细数据;
+                //显示用户明细的搜索结果;
+                this.userDetailTable = response.data
+              })
+            }
+          }else{
+            this.loading_yhmx = false
+            this.userDetailTable = []
+          }
+        }
+      },
+      //认证服务交易状态;数据查询及展示;
+      jiaoyizhuangtaiRenzheng_data() {
+
+        this.loadingEcharts = true
+        jiaoyizhuangtaiRenzheng(this.jiaoyiStatusSearchObj).then((response) => {
+          this.loadingEcharts = false
+          if(this.jiaoyiStatusSearchObj.mode =='所有模式'){
+          this.drawbingfaliangAllMode(response.data)
+          this.drawJiaoyichuliliangCountAllMode(response.data)
+          }else{
+           //并发量;√
+          this.drawbingfaliang(response.data)
+          //交易处理量统计
+          this.drawJiaoyichuliliangCount(response.data)
+          //请求传输时间
+          this.drawRequestAttrTime(response.data)
+          //响应时间;
+          this.drawResponceTime(response.data)
+          //响应传输时间;
+          this.drawResponseAttrTime(response.data)
+          //交易处理时间
+          this.drawJiaoyichuliTime(response.data)
+          }
+
+
+        }).catch((response) => {
+          this.loadingEcharts = false
+        })
+      },
+      //网证下载交易状态;数据查询及展示;
+      jiaoyizhuangtaiWangzheng_data() {
+        this.loadingEcharts = true
+        jiaoyizhuangtaiWangzheng(this.jiaoyiStatusSearchObj).then((response) => {
+          this.loadingEcharts = false
+          if(this.jiaoyiStatusSearchObj.mode =='所有模式'){
+          this.drawbingfaliangAllMode(response.data)
+          this.drawJiaoyichuliliangCountAllMode(response.data)
+          }else{
+          //并发量;√
+          this.drawbingfaliang(response.data)
+          //请求传输时间
+          this.drawRequestAttrTime(response.data)
+          //响应时间;
+          this.drawResponceTime(response.data)
+          //响应传输时间;
+          this.drawResponseAttrTime(response.data)
+          //交易处理量统计
+          this.drawJiaoyichuliliangCount(response.data)
+          //交易处理时间
+          this.drawJiaoyichuliTime(response.data)
+          }
+
+        }).catch((response) => {
+          this.loadingEcharts = false
+        })
+      },
+      //交易状态;
+      selectNodeList(){
+        selectModeList(this.jiaoyiStatusSearchObj.ywzd).then((response) => {
+          var newweizhi=[];
+          for (var i=0;i<response.data.length;i++){
+            if (this.jiaoyiStatusSearchObj.mode == response.data[i]){
+              this.weizhi = i
+            }
+          }
+          this.xuanzeywms  =  response.data
+          this.xuanzeywms.push('所有模式')
+        })
+      },
+      clickJiaoyizhuangtai() {
+        this.jyhjUserFlag = ''
+        this.yhmxUserFlag = ''
+        //设置默认值;
+        this.jiaoyiStatusSearchObj.time = formatDate(new Date(),'yyyy-MM-dd hh:mm')
+        this.defaultTime = moment(this.jiaoyiStatusSearchObj.time, 'YYYY-MM-DD hh:mm')
+        this.jiaoyiStatusSearchObj.timeType = "today"
+        this.jiaoyihuijuSelect = false
+        this.yonghumingxiSelect = false
+        this.jiaoyizhuangtaiSelect = true
+        this.jiaoyichaxunSelect = false
+        this.showSearchTableFlag = false
+        if(this.jiaoyiStatusSearchObj.mode!=''&&this.jiaoyiStatusSearchObj.ywzd!=''){
+          if (this.renzhengfuwuSelect) {
+            //认证服务;
+            this.jiaoyizhuangtaiRenzheng_data()
+          } else {
+            //网证下载;
+            this.jiaoyizhuangtaiWangzheng_data()
+          }
+        }
+      },
+      clickJiaoyichaxun() {
+        this.ywlshTable = []
+        this.jiaoyihuijuSelect = false
+        this.yonghumingxiSelect = false
+        this.jiaoyizhuangtaiSelect = false
+        this.jiaoyichaxunSelect = true
+      },
+      //根据用户标志查询数据
+      searchByUserFlag() {
+        if(this.jiaoyiStatusSearchObj.mode =='所有模式'){
+          this.flages = false
+        }else{
+          this.flages = true
+        }
+        // this.drawbingfaliang()
+        // this.drawbingfaliangAllMode()
+        //认证服务
+        // if (this.yhmxUserFlag==''){
+        //   this.$message.error('业务站点不能为空！')
+        // }else{
+        //   selectYwzdName(this.yhmxUserFlag).then((response) => {
+        //     this.ywzdzhongwenming = response.data
+        //   })
+        // }
+        if (this.renzhengfuwuSelect) {
+          if (this.jiaoyihuijuSelect) {
+            // 判断输入框是否为空?
+            if(this.jyhjUserFlag==''){
+              this.$message.error('业务站点不能为空！')
+            }else{
+              this.loading_search = true
+              //交易汇聚;
+              selectByYwzdAuth(this.jyhjUserFlag).then((response) => {
+                this.loading_search = false
+                if(response.data.success){
+                  this.searchResultData = [response.data]
+                  this.showSearchTableFlag = true
+                }else{
+                  this.showSearchTableFlag = true
+                  this.searchResultData = []
+                }
+              })
+            }
+          } else if (this.yonghumingxiSelect) {
+            if(this.yhmxUserFlag==''){
+              this.$message.error('业务站点不能为空！')
+            }else{
+              this.jiaoyiStatusSearchObj.ywzd = this.yhmxUserFlag
+              //将值赋给
+              this.userDetailTable = []
+              //用户明细
+                selectYwzdName(this.jiaoyiStatusSearchObj.ywzd).then((response) => {
+                  this.ywzdzhongwenming = response.data
+                })
+              userDetailRenzheng(this.yhmxUserFlag).then((response) => {
+                this.userDetailTable = response.data
+              })
+            }
+          } else {
+            //判断输入表单是否为空;
+            if(this.jiaoyiStatusSearchObj.ywzd==''||this.jiaoyiStatusSearchObj.mode==''||this.jiaoyiStatusSearchObj.time==''||this.jiaoyiStatusSearchObj.timeType==''){
+              this.$message.error('请填写输入框中所有数据')
+            }else{
+              //交易状态;
+              this.jiaoyizhuangtaiRenzheng_data()
+            }
+          }
+        } else {
+          if (this.jiaoyihuijuSelect) {
+            // 判断输入框是否为空?
+            if(this.jyhjClickUserFlag==''){
+              this.$message.error('业务站点不能为空！')
+            }else{
+              //交易汇聚;
+              selectByYwzdDownload(this.jyhjClickUserFlag).then((response) => {
+                //展示用户明细数据;
+                if(response.data.success){
+                  this.searchResultData = response.data
+                  this.showSearchTableFlag = true
+                }else{
+                  this.searchResultData = []
+                  this.showSearchTableFlag = true
+                }
+              })
+            }
+          } else if (this.yonghumingxiSelect) {
+            // 判断输入框是否为空?
+            if(this.yhmxUserFlag==''){
+              this.$message.error('业务站点不能为空！')
+            }else{
+              this.userDetailTable = []
+              //用户明细
+              userDetailWangzheng(this.yhmxUserFlag).then((response) => {
+                //显示用户明细的搜索结果;
+                this.userDetailTable = response.data
+              })
+            }
+          } else {
+            //判断输入表单是否为空;
+            if(this.jiaoyiStatusSearchObj.ywzd==''||this.jiaoyiStatusSearchObj.mode==''||this.jiaoyiStatusSearchObj.time==''||this.jiaoyiStatusSearchObj.timeType==''){
+              this.$message.error('请填写输入框中所有数据')
+            }else{
+              //交易状态;
+              this.jiaoyizhuangtaiWangzheng_data()
+            }
+          }
+        }
+      },
+      searchByYwlshFlag(){
+        if(this.ywlshFlag!=''){
+          this.ywlshTable = []
+          //用户明细
+          selectYwlshInfo(this.ywlshFlag).then((response) => {
+            //显示用户明细的搜索结果;
+            if(response.data.length>0){
+              this.ywlshTable = response.data
+            }else {
+              this.$message.error('未查到相关交易信息')
+              this.ywlshTable = []
+            }
+          })
+        }else {
+          this.$message.error('流水号不能为空')
+        }
+      },
+      clearYwlsh(){
+        this.ywlshFlag=''
+        this.ywlshTable = []
+      },
+      //表格样式变化;
+      //改变表格的内容区域样式;
+      tableRowClassName(record) {
+        return 'thCss '
+      },
+      //改变表格的头部;
+      tableHeader(record) {
+        return 'tableHead'
+      },
+      //设置查询结果展示表格的表头样式;
+      tableHeaderSearch(record) {
+        return {
+          style: {
+            'background-color': '#2cff95',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      //设置查询结果展示表格的数据样式;
+      searchTableRowCss() {
+        return 'searchTableRowCss'
+      },
+      //并发量 画图; √
+      drawbingfaliang(data) {
+        let myChart = this.$echarts.init(document.getElementById('bingfaliangid'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '并发量',
+              type: 'line',
+              data: data.countList,
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  yAxis: data.tokens_line
+                }]
+              },
+            },
+            {
+              name: '拟合曲线',
+              type: 'line',
+              data: data.fittedCurveCount,
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //并发量 画图; √
+      drawbingfaliangAllMode(data) {
+        let myChart = this.$echarts.init(document.getElementById('bingfaliangid1'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '并发量',
+              type: 'line',
+              data: data.countList,
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveTransHandleTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //请求传输时间 √
+      drawRequestAttrTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('requestattrtimeid'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '请求传输时间',
+              data: data.requesttransporttimeList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: data.request_transfer_time_alarm_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            }, {
+              name: '拟合曲线',
+              data: data.fittedCurveRequestTransportTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //响应时间 √
+      drawResponceTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('responseTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '响应时间',
+              data: data.requestrttList,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: data.response_time_alarm_line
+                }]
+              },
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveRequestRtt,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //响应传输时间 √
+      drawResponseAttrTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('responseAttrTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '响应传输时间',
+              data: data.responsetransporttimeList,
+              symbol: 'none',  //取消折点圆圈
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: data.response_transfer_time_alarm_line
+                }]
+              },
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveResponseTransportTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易处理量统计 √
+      drawJiaoyichuliliangCount(data) {
+        let myChart = this.$echarts.init(document.getElementById('jiaoyichuliliangCountId'))
+        // 绘制图表
+        myChart.setOption({
+          title: {
+            textStyle: {
+              color: 'red',
+              fontSize: 13,
+              fontWeight: 'normal',
+              fontFamily: '微软雅黑'
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '交易量',
+              data: data.totalList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: data.amount_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            },
+            {
+              name: '拟合曲线',
+              data: data.totalCurveCount,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易处理量统计 √
+      drawJiaoyichuliliangCountAllMode(data) {
+        let myChart = this.$echarts.init(document.getElementById('jiaoyichuliliangCountId1'))
+        // 绘制图表
+        myChart.setOption({
+          title: {
+            textStyle: {
+              color: 'red',
+              fontSize: 13,
+              fontWeight: 'normal',
+              fontFamily: '微软雅黑'
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '交易量',
+              data: data.totalList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              symbol: 'none'  //取消折点圆圈
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveTransHandleTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易处理时间 √
+      drawJiaoyichuliTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('jiaoyichuliTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '处理时间',
+              data: data.transhandletimeList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color:"red",
+                  fontSize:14,
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: data.processing_time_alarm_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveTransHandleTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      }
+    },
+    mounted() {
+      this.renzhengfuwuyibiaopan()
+      //写一个定时器;
+      timer_jiaoyihuiju = setInterval(() => {
+        this.loading_jyhj = true
+        if (this.renzhengfuwuSelect) {
+          //认证服务;
+          yibiaoJiaoyihuiju_renzheng().then((response) => {
+            this.loading = false
+            this.loading_jyhj = false
+            if (response.status === 200) {
+              //汇聚数据;
+
+              this.tradeConvergenceSub = response.data[0]//分
+              // var applicationForCertification = response.data[1][0]//认证申请;
+              // var authenticationRequest = response.data[1][1]//认证请求;
+              var authenticationRequest = response.data[1][0]//认证请求
+              //总;
+              this.totalTransactionAggregationTableData = [
+                // {
+                //   key: '1',
+                //   name: applicationForCertification.authType,
+                //   handleTime: applicationForCertification.authCollect.handleTime,
+                //   responseTime: applicationForCertification.authCollect.responseTime,
+                //   requestTime: applicationForCertification.authCollect.requestTime,
+                //   responseRtt: applicationForCertification.authCollect.responseRtt,
+                //   count: applicationForCertification.authCollect.count
+                // },
+                {
+                  key: '2',
+                  name: authenticationRequest.authType,
+                  handleTime: authenticationRequest.authCollect.handleTime,
+                  responseTime: authenticationRequest.authCollect.responseTime,
+                  requestTime: authenticationRequest.authCollect.requestTime,
+                  responseRtt: authenticationRequest.authCollect.responseRtt,
+                  count: authenticationRequest.authCollect.count
+                }
+              ]
+            }
+          })
+        } else {
+          //网证下载服务;
+          yibiaoJiaoyihuiju_wangzheng().then((response) => {
+            this.loading_jyhj = false
+            if (response.status === 200) {
+              //汇聚数据;
+              this.tradeConvergenceSub = response.data[0]//分
+              var applicationForCertification = response.data[1][0]//认证申请;
+              var authenticationRequest = response.data[1][1]//认证请求;
+              this.totalTransactionAggregationTableData = [
+                {
+                  key: '1',
+                  name: applicationForCertification.authType,
+                  handleTime: applicationForCertification.downloadCTIDCollect.handleTime,
+                  responseTime: applicationForCertification.downloadCTIDCollect.responseTime,
+                  requestTime: applicationForCertification.downloadCTIDCollect.requestTime,
+                  responseRtt: applicationForCertification.downloadCTIDCollect.responseRtt,
+                  count: applicationForCertification.downloadCTIDCollect.count
+                }, {
+                  key: '2',
+                  name: authenticationRequest.authType,
+                  handleTime: authenticationRequest.downloadCTIDCollect.handleTime,
+                  responseTime: authenticationRequest.downloadCTIDCollect.responseTime,
+                  requestTime: authenticationRequest.downloadCTIDCollect.requestTime,
+                  responseRtt: authenticationRequest.downloadCTIDCollect.responseRtt,
+                  count: authenticationRequest.downloadCTIDCollect.count
+                }
+              ]
+            }
+          })
+        }
+      }, 6 * 10 * 1000 )
+    },
+    destroyed(){
+      clearTimeout(timer_jiaoyihuiju)
+    },
+    computed: {
+      // temp_ywzdInput_yhmx:'',
+      // temp_ywzdInput_jyzt:'',
+      jyhjUserFlag: {
+        get: function() {
+          return this.temp_ywzdInput_jyhj
+        },
+        set: function(val) {
+          // this.temp_ywzdInput_jyhj = val.toUpperCase()
+        }
+      },
+      yhmxUserFlag:{
+        get: function() {
+          return this.temp_yhmxInput_jyhj
+        },
+        set: function(val) {
+          // this.temp_yhmxInput_jyhj = val.toUpperCase()
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  * {
+    font-family: 'Microsoft YaHei' !important;
+    color: white;
+  }
+
+  th {
+    color: white;
+  }
+
+  .table_title {
+    font-size: 15px;
+    font-weight: bold;
+    padding-left: 10px;
+    padding-bottom: 10px;
+  }
+
+  /* 三级菜单 */
+  .threeLevelMenu {
+    background-color: rgba(0, 51, 102, 0.51);
+    height: 50px;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+  }
+
+  /* 三级菜单 - 单个标签 */
+  .threeLevelMenu_single {
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 0 10px;
+  }
+
+  /* 三级标签 - 文字 */
+  .threeLevelMenu_single_text {
+    display: flex;
+    height: 30px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    padding: 0 5px;
+  }
+
+  /* 三级标签 - 单个 - 选中 */
+  .threeLevelMenu_single_select {
+    width: 100%;
+    background-color: #448DFE;
+    height: 3px;
+    position: absolute;
+    bottom: 0;
+    border-radius: 4px;
+  }
+
+  th.column-money,
+  td.column-money {
+    text-align: right !important;
+  }
+
+  /*交易状态折线图的Yangshi*/
+  .jyztchart {
+    height: 300px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+  }
+
+  .jyztchart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .jyztchart .content {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+</style>
+

src/views/globalOverview/globalOverview.vue

+<template>
+  <div :style="[{ height: (clientHeight-1) + 'px' },{background: '#070836' },{color: '#ffffff'}]">
+    <a-spin :spinning="loading" :indicator="indicator">
+      <!-- 上面两层 -->
+      <a-row>
+        <!-- 左边的两个 -->
+        <a-col :span="5" :offset="1" style="margin-top:5px;">
+          <!-- 业务站点告警 -->
+          <div :style="[{ height: smallSquare + 'px' },{position:'relative'}]" class="dataDisPlayBorder">
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <!-- 里面的内容 -->
+            <div class="showDataDiv_recentData">
+              <div class="showDataDiv_title">
+                <!-- 左上角的装饰块 -->
+                <div class="border_corner_decorate"></div>
+                <div class="showDataDiv_title_desc">业务站点告警</div>
+              </div>
+              <!-- 告警数 -->
+              <div v-if="queryAllYwzdCountAndAlarmYwzdCountPieList.length>0" class="siteAlarm_alarmDiv"
+                   :style="[{ marginTop: smallSquare*0.1 + 'px' },]">
+                <div class="siteAlarm_alarm">{{queryAllYwzdCountAndAlarmYwzdCountPieList[0].name}}:</div>
+                <div class="siteAlarm_alarmGraph"
+                     :style="[{width:(queryAllYwzdCountAndAlarmYwzdCountPieList[0].value/ queryAllYwzdCountAndAlarmYwzdCountPieList[1].value) * 55 +'%',},{fontFamily: 'Times New Roman'}]"
+                >{{ queryAllYwzdCountAndAlarmYwzdCountPieList[0].value }}
+                </div>
+              </div>
+              <!-- 受监控数 -->
+              <div class="siteAlarm_monitoredNum_Div" v-if="queryAllYwzdCountAndAlarmYwzdCountPieList.length>0">
+                <div class="siteAlarm_monitoredNum_Title">{{queryAllYwzdCountAndAlarmYwzdCountPieList[1].name}}:</div>
+                <div class="siteAlarm_monitoredNum_Graph">{{ queryAllYwzdCountAndAlarmYwzdCountPieList[1].value }}</div>
+              </div>
+            </div>
+          </div>
+          <!-- 并发 -->
+          <div :style="[{ height: smallSquare + 'px' },{marginTop:intervalHeight - 10 +'px'}]">
+            <!--<div class="dataDisplayTitle">并发</div>-->
+            <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <!-- 近期数据 -->
+              <div class="showDataDiv_recentData" style="position: relative">
+
+                <div class="showDataDiv_title">
+                  <!-- 左上角的装饰块 -->
+                  <div class="border_corner_decorate"></div>
+                  <!-- 描述; 最近一次并发数据(T/S) -->
+                  <div @click="showModal" class="showDataDiv_title_desc" style="cursor: pointer">并发(T/S)</div>
+                  <a-modal v-model="visible" title="请选择查询时间" style="text-align: center">
+                    <span>查询时间：</span>
+                    <a-range-picker
+                      style="z-index:99999;"
+                      show-time
+                      v-model="value1"
+                      @change="timeChange"
+                      format="YYYY-MM-DD HH:mm"
+                    />
+<!--                    <a-button style="background: none;color:#000 ">恢复默认</a-button>-->
+                    <template slot="footer">
+                      <a-button style="background: none;color:#000" key="back" @click="handleCancel">
+                        取消
+                      </a-button>
+                      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+                        查询
+                      </a-button>
+                    </template>
+                  </a-modal>
+                </div>
+                <!-- 折线图; -->
+                <div id="bingfa" :style="[{ height: smallSquare - 40 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+              </div>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="10" :offset="1" style="margin-top:5px;">
+          <div class="dataDisPlayBorder" :style="[{ height: alarmTopTenAlarmHeight+ 'px' }]">
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="showDataDiv_recentData">
+              <div class="showDataDiv_title">
+                <!-- 左上角的装饰块 -->
+                <div class="border_corner_decorate"></div>
+                <div class="showDataDiv_title_desc">业务站点告警数<span style="font-family: 'Times New Roman'">TOP10</span>
+                </div>
+              </div>
+              <div v-show="!showTopTenBarChartFlag" class="radar"
+                   :style="[{ height: alarmTopTenAlarmHeight-30 + 'px' },{width:alarmTopTenAlarmHeight-30+ 'px'}]"></div>
+              <!--<div id="topTenId" v-show="showTopTenBarChartFlag"-->
+              <!--:style="[{ height: alarmTopTenAlarmHeight -30 + 'px' },{width:alarmTopTenAlarmHeight -30 + 'px' }]"></div>-->
+              <div id="topTenId" v-show="showTopTenBarChartFlag"
+                   :style="[{ height: alarmTopTenAlarmHeight -30 + 'px' },{width:0.41 * clientWidth + 'px' }]"></div>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="5" :offset="1" style="margin-top:5px;">
+          <!-- 模式告警 -->
+          <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="showDataDiv_title">
+              <!-- 左上角的装饰块 -->
+              <div class="border_corner_decorate"></div>
+              <div class="showDataDiv_title_desc">模式告警</div>
+            </div>
+            <div v-show="!showmodeLeidaFlag" class="radar"
+                 :style="[{ height: smallSquare - 40 + 'px' },{width:smallSquare - 40 + 'px'},{marginLeft:'2%'}]"></div>
+            <!--没有数据展示雷达;-->
+            <div id="modeAlarm" :style="[{ height: smallSquare - 40 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+          </div>
+          <!-- 交易处理时间 -->
+          <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorderOut">
+            <div :style="[{ height: smallSquare+ 'px' },{marginTop:intervalHeight+'px'}]" class="dataDisPlayBorder">
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="border_corner"></div>
+              <div class="showDataDiv_title">
+                <!-- 左上角的装饰块 -->
+                <div class="border_corner_decorate"></div>
+                <div @click="showModaljiaoyi"  class="showDataDiv_title_desc" style="cursor:pointer;">交易处理时间(T/ms)</div>
+                <a-modal v-model="visible1" title="请选择查询时间" style="text-align: center">
+                  <a-range-picker
+                    style="z-index:99999;"
+                    show-time
+                    v-model="value2"
+                    @change="timeChangejiaoyi"
+                    format="YYYY-MM-DD HH:mm"
+                  />
+                  <template slot="footer">
+                    <a-button style="background: none;color:#000" key="back" @click="handleCanceljiaoyi">
+                      取消
+                    </a-button>
+                    <a-button key="submit" type="primary" :loading="loading" @click="handleOkjiaoyi">
+                      查询
+                    </a-button>
+                  </template>
+                </a-modal>
+              </div>
+              <!-- 折线图; -->
+              <div id="jiaoyichulishijian"
+                   :style="[{ height: smallSquare -40 + 'px' },{width:'96%'},{marginLeft:'2%'}]">
+              </div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+      <a-row :style="[{marginTop:intervalHeight - 20 +'px'},]">
+        <!-- 请求响应时间 -->
+        <a-col :span="5" :offset="1" style="margin-top:10px;">
+          <!-- 请求响应事件 -->
+          <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <!-- 近期数据 -->
+            <div class="showDataDiv_recentData">
+              <div class="showDataDiv_title">
+                <!-- 左上角的装饰块 -->
+                <div class="border_corner_decorate"></div>
+                <div @click="showModalyysj" class="showDataDiv_title_desc" style="cursor:pointer;">请求响应时间(T/ms)</div>
+                <a-modal v-model="visible2" title="请选择查询时间" style="text-align: center">
+                  <a-range-picker
+                    style="z-index:99999;"
+                    show-time
+                    v-model="value3"
+                    @change="timeChangeyysj"
+                    format="YYYY-MM-DD HH:mm"
+                  />
+                  <template slot="footer">
+                    <a-button style="background: none;color:#000" key="back" @click="handleCancelyysj">
+                      取消
+                    </a-button>
+                    <a-button key="submit" type="primary" :loading="loading" @click="handleOkyysj">
+                      查询
+                    </a-button>
+                  </template>
+                </a-modal>
+              </div>
+              <!-- 折线图; -->
+              <div id="qingqiuxiangyingshijian"
+                   :style="[{ height: smallSquare - 40 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+            </div>
+          </div>
+        </a-col>
+        <!-- 交易量总览 + 交易量统计(分钟) -->
+        <a-col :span="10" :offset="1" style="margin-top:10px;">
+          <!-- 交易量总览 + 交易量统计 （分钟）-->
+          <a-row>
+            <!-- 交易量总览 -->
+            <a-col :span="11">
+              <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <!-- 近期数据 -->
+                <div class="showDataDiv_recentData">
+                  <div class="showDataDiv_title">
+                    <!-- 左上角的装饰块 -->
+                    <div class="border_corner_decorate"></div>
+                    <div @click="showModaljiaoyiliang" class="showDataDiv_title_desc" style="cursor:pointer;">交易量总览(T/h)</div>
+                    <a-modal v-model="visible3" title="请选择查询时间" style="text-align: center">
+                      <a-range-picker
+                        style="z-index:99999;"
+                        show-time
+                        v-model="value4"
+                        @change="timeChangejiaoyiliang"
+                        format="YYYY-MM-DD HH:mm"
+                      />
+                      <template slot="footer">
+                        <a-button style="background: none;color:#000" key="back" @click="handleCanceljiaoyiliang">
+                          取消
+                        </a-button>
+                        <a-button key="submit" type="primary" :loading="loading" @click="handleOkjiaoyiliang">
+                          查询
+                        </a-button>
+                      </template>
+                    </a-modal>
+                  </div>
+                  <div id="jiaoyiliangzonglan"
+                       :style="[{ height: smallSquare - 40 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+                </div>
+              </div>
+            </a-col>
+            <!-- 交易量统计（分钟） -->
+            <a-col :span="11" :offset="2">
+              <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <div class="border_corner"></div>
+                <!-- 近期数据 -->
+                <div class="showDataDiv_recentData">
+                  <div class="showDataDiv_title">
+                    <!-- 左上角的装饰块 -->
+                    <div class="border_corner_decorate"></div>
+                    <!-- 描述; 最近一次并发数据(T/S) -->
+                    <div  @click="showModalfengzhong" class="showDataDiv_title_desc" style="cursor:pointer;">交易量统计(分钟)(T/min)</div>
+                    <a-modal v-model="visible4" title="请选择查询时间" style="text-align: center">
+                      <a-range-picker
+                        style="z-index:99999;"
+                        show-time
+                        v-model="value5"
+                        @change="timeChangefengzhong"
+                        format="YYYY-MM-DD HH:mm"
+                      />
+                      <template slot="footer">
+                        <a-button style="background: none;color:#000" key="back" @click="handleCancelfengzhong">
+                          取消
+                        </a-button>
+                        <a-button key="submit" type="primary" :loading="loading" @click="handleOkfengzhong">
+                          查询
+                        </a-button>
+                      </template>
+                    </a-modal>
+                  </div>
+                  <!-- 折线图; -->
+                  <div id="jiaoyiliangzonglanmin"
+                       :style="[{ height: smallSquare - 40 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </a-col>
+        <!-- 交易量统计（同环比） -->
+        <a-col :span="5" :offset="1" style="margin-top:10px;">
+          <div :style="[{ height: smallSquare + 'px' }]" class="dataDisPlayBorder">
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <div class="border_corner"></div>
+            <!-- 近期数据 -->
+            <div class="showDataDiv_recentData">
+              <div class="showDataDiv_title">
+                <!-- 左上角的装饰块 -->
+                <div class="border_corner_decorate"></div>
+                <!-- 描述; 最近一次并发数据(T/S) -->
+<!--                <div @click="showModaltonghuanbi" class="showDataDiv_title_desc" style="cursor:pointer;">交易量统计同环比</div>-->
+                <div class="showDataDiv_title_desc" >交易量统计同环比</div>
+                <a-modal v-model="visible5" title="请选择查询时间" style="text-align: center">
+                  <a-range-picker
+                    style="z-index:99999;"
+                    show-time
+                    v-model="value6"
+                    @change="timeChangetonghuanbi"
+                    format="YYYY-MM-DD HH:mm"
+                  />
+                  <template slot="footer">
+                    <a-button style="background: none;color:#000" key="back" @click="handleCanceltonghuanbi">
+                      取消
+                    </a-button>
+                    <a-button key="submit" type="primary" :loading="loading" @click="handleOktonghuanbi">
+                      查询
+                    </a-button>
+                  </template>
+                </a-modal>
+              </div>
+              <!-- 折线图; -->
+              <div id="jiaoyiliangtongjiTongBi" class="jiaoyiliangtongjiTongBiCss"
+                   :style="[{ height: smallSquare - 30 + 'px' },{width:'96%'},{marginLeft:'2%'}]"></div>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+<script>
+  import $ from 'jquery'
+  import { formatDate } from '@/utils/time.js'
+  const clientHeight = $(window).height() - 64
+  const clientWidth = $(window).width()
+  const smallSquare = 0.3 * clientHeight //小方块的高度;
+  const intervalHeight = 0.05 * clientHeight //间隔;
+  const alarmTopTenAlarmHeight = 0.65 * clientHeight//业务站点告警数TOP10;
+  import { queryAllYwzdCountAndAlarmYwzdCountPieList, queryAmountBranchesLineChartMap,selectBingFaZheXian,
+    selectJiaoYiChuLiShiJian,selectQingQiuXiangYingShiJian,selectJiaoYiLiangZongLan,selectJiaoYiLiangTongJiMin,
+    selectJiaoYiLiangTongJiTongHuanBi,checkTime} from '@/api/user.js'
+
+  var timer
+  let d = new Date()
+  let year = d.getFullYear()
+  export default {
+    data() {
+      return {
+        visible: false,
+        visible1:false,
+        visible2:false,
+        visible3:false,
+        visible4:false,
+        visible5:false,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        loading: true,
+        currentYear: year, //今年的年份;
+        clientHeight: clientHeight, //屏幕可视区域的高度;
+        clientWidth: clientWidth,//可视区宽度;
+        smallSquare: smallSquare, //小方块的高度;
+        intervalHeight: intervalHeight, //间隔;
+        alarmTopTenAlarmHeight: alarmTopTenAlarmHeight, //业务站点告警数TOP10;
+        queryAllYwzdCountAndAlarmYwzdCountPieList: [], //业务站点告警的数据;
+        showTopTenBarChartFlag: false,//展示雷达图，隐藏柱状图;
+        tongbiTimeList: [],
+        tongbiValueList: [],
+        huanbiTimeList: [],
+        huanbiValueList: [],
+        showmodeLeidaFlag: false,//模式告警没有数据 显示雷达;
+        value1:'',
+        value2:'',
+        value3:'',
+        value4:'',
+        value5:'',
+        value6:'',
+        startTime: '',
+        endTime: '',
+        startTimejiaoyi: '',
+        endTimejiaoyi: '',
+        startTimeyysj: '',
+        endTimeyysj: '',
+        startTimejiaoyiliang: '',
+        endTimejiaoyiliang: '',
+        startTimefengzhong: '',
+        endTimefengzhong: '',
+        startTimetonghuanbi: '',
+        endTimetonghuanbi: '',
+        lock1:true,
+        lock2:true,
+        lock3:true,
+        lock4:true,
+        lock5:true,
+        lock6:true,
+      }
+    },
+    mounted() {
+      this.getAllData()
+      timer = setInterval(() => {
+        setTimeout(this.getAllData())
+      }, 1000*60)
+    },
+    destroyed() {
+      clearInterval(timer)
+    },
+    methods: {
+      //查询时间
+      handleCancel(){
+        this.visible = false
+      },
+      handleCanceltonghuanbi(){
+        this.visible5 = false
+      },
+      handleCanceljiaoyi(){
+        this.visible1 = false
+      },
+      handleCanceljiaoyiliang(){
+        this.visible3 = false
+      },
+      handleCancelfengzhong(){
+        this.visible4 = false
+      },
+      showModal() {
+        this.visible = true;
+      },
+      showModaltonghuanbi(){
+        this.visible5 = true
+      },
+      showModaljiaoyiliang(){
+        this.visible3 = true
+      },
+      showModalfengzhong(){
+        this.visible4 = true
+      },
+      showModalyysj(){
+        this.visible2 = true;
+      },
+      handleCancelyysj(){
+        this.visible2 = false
+      },
+      timeChange(date){
+        var d = new Date(this.value1[0])
+        this.startTime =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value1[1])
+        this.endTime =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      timeChangejiaoyi(date){
+        var d = new Date(this.value2[0])
+        this.startTimejiaoyi =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value2[1])
+        this.endTimejiaoyi =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      timeChangeyysj(date){
+        var d = new Date(this.value3[0])
+        this.startTimeyysj =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value3[1])
+        this.endTimeyysj =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      timeChangejiaoyiliang(date){
+        var d = new Date(this.value4[0])
+        this.startTimejiaoyiliang =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value4[1])
+        this.endTimejiaoyiliang =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      timeChangefengzhong(date){
+        var d = new Date(this.value5[0])
+        this.startTimefengzhong =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value5[1])
+        this.endTimefengzhong =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      timeChangetonghuanbi(date){
+        var d = new Date(this.value6[0])
+        this.startTimetonghuanbi =
+          d.getFullYear() +
+          '-' +
+          ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+          '-' +
+          (d.getDate()<10 ? "0"+d.getDate() : d.getDate()) +
+          ' ' +
+          ((d.getHours())<10 ? "0"+d.getHours():d.getHours()) +
+          ":" +
+          ((d.getMinutes())<10 ? "0"+d.getMinutes():d.getMinutes())
+        var d2 = new Date(this.value6[1])
+        this.endTimetonghuanbi =
+          d2.getFullYear() +
+          '-' +
+          ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+          '-' +
+          (d2.getDate()<10 ? "0"+d2.getDate() : d2.getDate()) +
+          ' ' +
+          ((d2.getHours())<10 ? "0"+(d2.getHours()):d2.getHours()) +
+          ":" +
+          ((d2.getMinutes())<10 ? "0"+(d2.getMinutes()):d2.getMinutes())
+      },
+      showModaljiaoyi() {
+        this.visible1 = true;
+      },
+      handleOk(e) {
+        checkTime(this.startTime,this.endTime).then((response) => {
+          if(response.data){
+            this.loading = true
+            selectBingFaZheXian(this.startTime,this.endTime).then((response) => {
+              this.lock1=false;
+              this.drawBingFaZheXian(response.data.middleLineChartMap.countList)
+              this.loading = false
+            })
+            this.visible = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+
+      },
+      handleOkjiaoyi(e) {
+        checkTime(this.startTimejiaoyi,this.endTimejiaoyi).then((response) => {
+          if(response.data){
+            this.loading = true
+            selectJiaoYiChuLiShiJian(this.startTimejiaoyi,this.endTimejiaoyi).then((response) => {
+              this.lock2=false
+              this.drawJiaoYiChuLiShiJian(response.data.middleLineChartMap.transhandletimeList)
+              this.loading = false
+            })
+            this.visible1 = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+
+      },
+      handleOkyysj(){
+
+        checkTime(this.startTimeyysj,this.endTimeyysj).then((response) => {
+          if(response.data){
+            this.loading = true
+            selectQingQiuXiangYingShiJian(this.startTimeyysj,this.endTimeyysj).then((response) => {
+              this.lock3 = false
+              this.drawQingQiuXiangYingShiJian(response.data.middleLineChartMap.requestrttList)
+              this.loading = false
+            })
+            this.visible2 = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+
+      },
+      handleOkjiaoyiliang(){
+        checkTime(this.startTimejiaoyiliang,this.endTimejiaoyiliang).then((response) => {
+          if(response.data){
+            this.loading = true
+            selectJiaoYiLiangZongLan(this.startTimejiaoyiliang,this.endTimejiaoyiliang).then((response) => {
+              this.lock4=false
+              this.drawJiaoYiLiangZongLan(this,response.data.queryTotalAmountLineChartMap.amountList)
+              this.loading = false
+            })
+            this.visible3 = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+
+      },
+      handleOkfengzhong(){
+        checkTime(this.startTimefengzhong,this.endTimefengzhong).then((response) => {
+          if(response.data){
+            this.loading = true
+            selectJiaoYiLiangTongJiMin(this.startTimefengzhong,this.endTimefengzhong).then((response) => {
+              this.lock5=false
+              this.drawJiaoYiLiangTongJiMin(response.data.queryTotalAmountBranchLineBarList)
+              this.loading = false
+            })
+            this.visible4 = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+
+      },
+      handleOktonghuanbi(){
+        checkTime(this.startTimetonghuanbi,this.endTimetonghuanbi).then((response) => {
+          if(response.data){
+            this.loading = true
+            this.tongbiTimeList=[];
+            this.tongbiValueList=[];
+            this.huanbiTimeList=[];
+            this.huanbiValueList=[];
+            selectJiaoYiLiangTongJiTongHuanBi(this.startTimetonghuanbi,this.endTimetonghuanbi).then((response) => {
+              this.lock6=false
+              // 同比x轴
+              for (var i=0;i<response.data.queryTotalAmountBranchesLineTongBiList.length;i++){
+                this.tongbiTimeList.push(response.data.queryTotalAmountBranchesLineTongBiList[i][0])
+                this.tongbiValueList.push(response.data.queryTotalAmountBranchesLineTongBiList[i][1])
+              }
+              for (var i=0;i<response.data.queryTotalAmountBranchesLineHuanBiList.length;i++){
+                this.huanbiTimeList.push(response.data.queryTotalAmountBranchesLineHuanBiList[i][0])
+                this.huanbiValueList.push(response.data.queryTotalAmountBranchesLineHuanBiList[i][1])
+              }
+              this.drawJiaoYiLiangTongJiTongHuanBi()
+              this.loading = false
+            })
+            this.visible5 = false;
+          }else{
+            this.$message.error('最多选择2天时间！')
+          }
+        })
+      },
+      getAllData() {
+        // this.loading = true
+        //获取当前时间和上一分钟的时间;
+        var endTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        var lastMinutes = new Date()
+        lastMinutes.setMilliseconds(lastMinutes.getMilliseconds() - 1000 * 60)
+        var startTime = formatDate(lastMinutes, 'yyyy-MM-dd hh:mm')
+        var data = {
+          startTime: startTime,
+          endTime: endTime,
+          ywzd: '',
+          mode: ''
+        }
+        queryAllYwzdCountAndAlarmYwzdCountPieList(data).then((response) => {
+          this.loading = false
+          if (response.status === 200) {
+            //同比的时间;
+            this.tongbiTimeList = []
+            this.tongbiValueList = []
+            this.huanbiTimeList = []
+            this.huanbiValueList = []
+            this.getTongBiAndHuanBiData(response.data.queryTotalAmountBranchesLineTongBiList, response.data.queryTotalAmountBranchesLineHuanBiList)
+            //并发;
+            this.queryAllYwzdCountAndAlarmYwzdCountPieList = response.data.queryAllYwzdCountAndAlarmYwzdCountPieList //业务站点告警;
+            if(this.lock1){
+              this.drawBingFaZheXian(response.data.middleLineChartMap.countList) //画并发折线图;
+            }
+            //交易处理时间;
+            if (this.lock2){
+              this.drawJiaoYiChuLiShiJian(response.data.middleLineChartMap.transhandletimeList)
+            }
+
+            //requestrttList 请求响应时间;
+            if (this.lock3){
+              this.drawQingQiuXiangYingShiJian(response.data.middleLineChartMap.requestrttList)
+            }
+           if (this.lock4){
+             //交易量总览（小时）
+             this.drawJiaoYiLiangZongLan(this, response.data.queryTotalAmountLineChartMap.amountList)
+           }
+
+            this.timeList = response.data.queryTotalAmountLineChartMap.timeList
+            this.amountList = response.data.queryTotalAmountLineChartMap.amountList
+            if (this.lock5){
+              //交易量统计（分钟）
+              this.drawJiaoYiLiangTongJiMin(response.data.queryTotalAmountBranchLineBarList)
+            }
+
+            //模式告警饼状图;
+            this.drawModeAlarm(response.data.queryAllModeAlarmCountGroupByModePieList)
+            //是否有数据；
+            this.showmodeLeidaFlag = true
+            if (response.data.queryAllModeAlarmCountGroupByModePieList != undefined && response.data.queryAllModeAlarmCountGroupByModePieList.length > 0) {
+              this.showmodeLeidaFlag = true
+            } else {
+              this.showmodeLeidaFlag = false
+            }
+            //交易量统计（同环比）
+            if (this.lock6){
+              this.drawJiaoYiLiangTongJiTongHuanBi()//重新画;
+            }
+
+            //top10 queryYwzdAndAlarmCountTopTenBarChartMap -ywzdAlarmCountList -ywzdList
+            var queryYwzdAndAlarmCountTopTenBarChartMap = response.data.queryYwzdAndAlarmCountTopTenBarChartMap
+            if (queryYwzdAndAlarmCountTopTenBarChartMap.ywzdAlarmCountList != undefined && queryYwzdAndAlarmCountTopTenBarChartMap.ywzdAlarmCountList.length > 0) {
+              this.showTopTenBarChartFlag = true//隐藏雷达图，展示柱状图;
+              this.drawTopTenAlarm(queryYwzdAndAlarmCountTopTenBarChartMap)
+            }
+          }
+        })
+      },
+      //获取同比和环比的数据：
+      getTongBiAndHuanBiData(tongbiData, huanbiData) {
+        for (var i = 0; i < tongbiData.length; i++) {
+          this.tongbiTimeList.push(tongbiData[i][0])
+          this.tongbiValueList.push(tongbiData[i][1])
+        }
+        for (var i = 0; i < huanbiData.length; i++) {
+          this.huanbiTimeList.push(huanbiData[i][0])
+          this.huanbiValueList.push(huanbiData[i][1])
+        }
+      },
+      //top10告警;
+      drawTopTenAlarm(data) {
+        let myChart = this.$echarts.init(document.getElementById('topTenId'))
+        myChart.setOption({
+          color: ['#0576FF'],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            xAxisIndex: 1,
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            },
+            splitLine: {
+              show: true, //去掉网格
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
+          },
+          yAxis: {
+            type: 'category',
+            data: data.ywzdList,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              type: 'bar',
+              data: data.ywzdAlarmCountList
+            }
+          ]
+        })
+      },
+      //模式告警;
+      drawModeAlarm(data) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById('modeAlarm'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'item',
+            formatter: '<br/>{b} : {c} ({d}%)'
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '70%',
+              data: data
+            }
+          ]
+        })
+      },
+      //交易处理时间的图;
+      drawJiaoYiChuLiShiJian(data) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('jiaoyichulishijian')
+        )
+        // 绘制图表
+        myChart.setOption({
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            splitNumber: 4,
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          series: [
+            {
+              areaStyle: {
+                color: '#141e73'
+              },
+              data: data,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            }
+          ]
+        })
+      },
+      // 并发 - 折线图
+      drawBingFaZheXian(bingfazhexianData) {
+        console.log(bingfazhexianData)
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById('bingfa'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            splitNumber: 4,
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          series: [
+            {
+              areaStyle: {
+                color: '#141e73'
+              },
+              data: bingfazhexianData,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //请求响应事件 - 折线图;
+      drawQingQiuXiangYingShiJian(data) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('qingqiuxiangyingshijian')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          series: [
+            {
+              areaStyle: {
+                color: '#141e73'
+              },
+              data: data,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易量总览 - 折线图;
+      drawJiaoYiLiangZongLan(that, data) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('jiaoyiliangzonglan')
+        )
+        myChart.on('click', function(params) {
+          that.selectTongHuanBiDataByMin(params.value[0])
+        })
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            splitNumber: 4,
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontFamily: 'Times New Roman'
+              },
+              formatter(value) {
+                var num = parseInt(value)
+                if(num/1000>=1&&num/10000<1){
+                  return num/1000 + 'k'
+                }else if(num/10000>=1){
+                  return num/10000 + 'w'
+                }else{
+                  return num
+                }
+              }
+            }
+          },
+          series: [
+            {
+              areaStyle: {
+                color: '#141e73'
+              },
+              data: data,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //根据分钟显示同环比;
+      selectTongHuanBiDataByMin(endTime) {
+        //遍历出对应的全部时间;
+        for (var i = 0; i < this.amountList.length; i++) {
+          if (this.amountList[i][0] == endTime) {
+            endTime = this.timeList[i]
+            break
+          }
+        }
+        queryAmountBranchesLineChartMap(endTime).then((response) => {
+          console.log(response.data)
+          this.tongbiTimeList = []
+          this.tongbiValueList = []
+          this.huanbiTimeList = []
+          this.huanbiValueList = []
+          this.drawJiaoYiLiangTongJiMin([])
+          //交易量统计（分钟）
+          this.drawJiaoYiLiangTongJiMin(response.data.queryTotalAmountBranchLineBarList)
+          this.getTongBiAndHuanBiData(response.data.queryTotalAmountBranchesLineTongBiList, response.data.queryTotalAmountBranchesLineHuanBiList)
+          this.drawJiaoYiLiangTongJiTongHuanBi()//重新画;
+        })
+      },
+      //交易总览（分钟） - 折线图
+      drawJiaoYiLiangTongJiMin(data) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('jiaoyiliangzonglanmin')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '5%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              },
+              formatter(value) {
+                var num = parseInt(value)
+                if(num/1000>=1 && num/10000<1){
+                  return num/1000 + 'k'
+                }else if(num/10000>=1){
+                  return num/10000 + 'w'
+                }else{
+                  return num
+                }
+              }
+            },
+            splitNumber: 4,
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff',
+                width: 1,
+                type: 'solid'
+              }
+            }
+          },
+          series: [
+            {
+              areaStyle: {
+                color: '#141e73'
+              },
+              data: data,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易量统计（同比） - 折线图
+      drawJiaoYiLiangTongJiTongHuanBi() {
+        var colors = ['#0576FF', '#ffd967cc', '#675bba']
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('jiaoyiliangtongjiTongBi')
+        )
+        myChart.setOption({
+          color: colors,
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['同比', '环比'],
+            right: '4%',
+            top: '0',
+            padding: [0, 0, 0, 0],
+            textStyle: {
+              fontSize: 12,
+              color: '#ffffff'
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '7%',
+            top: '15%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              },
+              splitLine: {
+                show: false //去掉网格线
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff'
+                }
+              },
+              data: this.tongbiTimeList
+            },
+            {
+              type: 'category',
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff'
+                }
+              },
+              data: this.huanbiTimeList
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              splitLine: {
+                show: false //去掉网格线
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 14,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+                formatter(value) {
+                  var num = parseInt(value)
+                  if(num/1000>=1&&num/10000<1){
+                    return num/1000 + 'k'
+                  }else if(num/10000>=1){
+                    return num/10000 + 'w'
+                  }else{
+                    return num
+                  }
+                },
+              },
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '同比',
+              type: 'line',
+              smooth: true,
+              data: this.tongbiValueList
+            },
+            {
+              name: '环比',
+              type: 'line',
+              xAxisIndex: 1,
+              smooth: true,
+              data: this.huanbiValueList,
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff'
+                }
+              }
+            }
+          ]
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  * {
+    font-family: "Microsoft YaHei";
+  }
+
+  .jiaoyiliangtongjiTongBiCss {
+    position: absolute;
+    top: 30px;
+  }
+
+  .dataDisPlayBorder {
+    border: 1px solid #141e73;
+    border-top: 0;
+    position: relative;
+    background: linear-gradient(#0b0e53, #02032f);
+  }
+
+  .dataDisplayTitle {
+    height: 30px;
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 30px;
+  }
+
+  /* 业务站点告警 - 内容部分 - 外层 */
+  .siteAlarm_monitedDiv {
+    height: 80%;
+    width: 90%;
+    left: 5%;
+    position: absolute;
+    top: 10%;
+    color: #ffffff;
+  }
+
+  /* 业务站点告警 - 内容部分 - 告警数+后面柱状图 外层 */
+  .siteAlarm_alarmDiv {
+    display: flex;
+  }
+
+  /* 业务站点告警 - 内容部分 - 告警数 - 告警数三个字 */
+  .siteAlarm_alarm {
+    width: 40%;
+    color: #ed6413;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+  }
+
+  /* 业务站点告警 - 内容部分 - 告警数 - 柱状图 */
+  .siteAlarm_alarmGraph {
+    width: 55%;
+    background: linear-gradient(to right, #070836, #ed6413);
+    height: 30px;
+    line-height: 30px;
+    border-radius: 35px;
+  }
+
+  /* 业务站点告警 - 内容部分 - 受监控数 - 外层 */
+  .siteAlarm_monitoredNum_Div {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  /* 业务站点告警 - 内容部分 - 受监控数 - 标题 */
+  .siteAlarm_monitoredNum_Title {
+    width: 40%;
+    height: 30px;
+    line-height: 30px;
+    color: #e4effd;
+    text-align: center;
+  }
+
+  /* 业务站点告警 - 内容部分 - 受监控数 - 柱状图 */
+  .siteAlarm_monitoredNum_Graph {
+    width: 55%;
+    background: linear-gradient(to right, #070836, #0576ff);
+    height: 30px;
+    line-height: 30px;
+    font-family: 'Times New Roman';
+    border-radius: 35px;
+  }
+
+  /* 数据展示框的标题栏目 */
+  .showDataDiv_title {
+    height: 40px;
+    display: flex;
+    width: 100%;
+    padding: 0;
+    position: relative;
+  }
+
+  /* 数据展示框 - 标题 - 左边装饰块 */
+  .showDataDiv_title .border_corner_decorate {
+    background-color: #4d5ca1;
+    width: 5px;
+    height: 30px;
+    border-radius: 3px;
+    margin-top: 5px;
+  }
+
+  /* 数据展示框 - 标题 - 文字描述 */
+  .showDataDiv_title .showDataDiv_title_desc {
+    font-family: 'Microsoft YaHei';
+    color: #ffffff;
+    height: 40px;
+    line-height: 40px;
+    margin-left: 5px;
+  }
+
+  /* 数据展示框 - 标题 - 按钮 */
+  .showDataDiv_title .showDataDiv_title_btn {
+    background-color: rgba(123, 123, 123, 0);
+    color: #ffffff;
+    border-radius: 20px;
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    font-size: 10px;
+    z-index: 99999;
+    padding: 5px;
+  }
+</style>

src/views/home/home.vue

+<template>
+  <div id="components-layout-demo-basic" style = 'height: auto'>
+    <a-layout>
+      <a-layout-header style="display: flex;align-items: center;background: #03092b;">
+      <div style="width:95%; display: flex;align-items: center;">
+        <!-- logo -->
+        <img style="height: 30px" src="../../assets/logo.png" alt/>
+        <!-- 仪表盘 + 拓扑图 + 追踪 + 性能剖析 + 告警 -->
+        <div style="margin-left: 20px">
+          <!-- 全局概览 -->
+          <router-link to="/globalOverview" >
+            <a-button
+              icon="appstore"
+              :ghost="current!='globalOverview'&&hoverIndex!='globalOverview'"
+              @click="clickBtn('globalOverview')"
+              @mouseover="hoverIndex = 'globalOverview'"
+              @mouseout="hoverIndex = -1"
+              style="background-color: #333844"
+              :class="[current=='globalOverview' ? 'selectBtn' : 'noEventBtn',hoverIndex=='globalOverview'?'selectBtn':'']"
+            >全局概览</a-button>
+          </router-link>
+          <!-- 交易分析 -->
+          <router-link to="/dashboard">
+            <a-button icon="area-chart" :ghost="current!='dashboard'&&hoverIndex!='dashboard'"
+              :class="[current=='dashboard' ? 'selectBtn' : 'noEventBtn',hoverIndex=='dashboard'?'selectBtn':'']"
+              @mouseover="hoverIndex = 'dashboard'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('dashboard')">
+              交易分析
+            </a-button>
+          </router-link>
+          <!-- 链路图 -->
+          <router-link to="/topology">
+            <a-button icon="sliders" :ghost="current!='topology'&&hoverIndex!='topology'"
+              :class="[current=='topology' ? 'selectBtn' : 'noEventBtn',hoverIndex=='topology'?'selectBtn':'']"
+              @mouseover="hoverIndex = 'topology'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('topology')">
+              链路图
+            </a-button>
+          </router-link>
+          <!-- 追踪 -->
+          <!--<router-link to="/trace">-->
+            <!--<a-button icon="branches" :ghost="current!='trace'&&hoverIndex!='trace'"-->
+              <!--:class="[current=='trace' ? 'selectBtn' : 'noEventBtn',hoverIndex=='trace'?'selectBtn':'']"-->
+                      <!--@mouseover="hoverIndex = 'trace'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('trace')">-->
+              <!--追踪-->
+            <!--</a-button>-->
+          <!--</router-link>-->
+          <!-- 性能剖析 -->
+          <!--<router-link to="/performanceAnalysis">
+            <a-button icon="info-circle" :ghost="current!='performanceAnalysis'&&hoverIndex!='performanceAnalysis'"
+                      :class="[current=='performanceAnalysis' ? 'selectBtn' : 'noEventBtn',hoverIndex=='performanceAnalysis'?'selectBtn':'']"
+                      @mouseover="hoverIndex = 'performanceAnalysis'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('performanceAnalysis')">
+              性能剖析
+            </a-button>
+          </router-link>-->
+          <!-- 服务监控 -->
+          <router-link to="/serviceMonitor">
+            <a-button
+              icon="info-circle"
+              :ghost="current!='serviceMonitor'&&hoverIndex!='serviceMonitor'"
+              :class="[current=='serviceMonitor' ? 'selectBtn' : 'noEventBtn',hoverIndex=='serviceMonitor'?'selectBtn':'']"
+              @mouseover="hoverIndex = 'serviceMonitor'"
+              @mouseout="hoverIndex = -1"
+              style="background-color: #333844;"
+              @click="clickBtn('serviceMonitor')"
+            >服务监控</a-button>
+          </router-link>
+          <!--配置管理-->
+          <router-link to="/configurationManagement">
+            <a-button
+              icon="info-circle"
+              :ghost="current!='configurationManagement'&&hoverIndex!='configurationManagement'"
+              :class="[current=='configurationManagement' ? 'selectBtn' : 'noEventBtn',hoverIndex=='configurationManagement'?'selectBtn':'']"
+              @mouseover="hoverIndex = 'configurationManagement'"
+              @mouseout="hoverIndex = -1"
+              style="background-color: #333844;"
+              @click="clickBtn('configurationManagement')"
+            >配置管理</a-button>
+          </router-link>
+          <!-- 告警 -->
+          <router-link to="/alarm">
+            <a-button
+              icon="info-circle"
+              :ghost="current!='alarm'&&hoverIndex!='alarm'"
+              :class="[current=='alarm' ? 'selectBtn' : 'noEventBtn',hoverIndex=='alarm'?'selectBtn':'']"
+              style="background-color: #333844"
+              @mouseover="hoverIndex = 'alarm'"
+              @mouseout="hoverIndex = -1"
+              @click="clickBtn('alarm')"
+            >告警</a-button>
+          </router-link>
+        </div>
+      </div>
+        <div style="width:5%;">
+          <a-button
+            type="danger"
+            style="background-color:#40a9ff"
+            @click="goLogin()"
+          >
+            注销
+          </a-button>
+        </div>
+      </a-layout-header>
+      <a-layout-content  :style="[{background: '#070836' },{color: '#ffffff'}]">
+        <router-view></router-view>
+      </a-layout-content>
+    </a-layout>
+  </div>
+</template>
+<script>
+  import $ from 'jquery'
+  import store from "@/store";
+  import {timerChangeToken} from '@/api/user.js'
+import { mapGetters } from "vuex";
+import {
+  getToken,
+  setToken,
+  removeToken,
+} from "@/utils/auth";
+const clientHeight = $(window).height();
+
+export default {
+  name: "overview",
+  data() {
+    return {
+      current: this.$route.path.split('/')[1],
+      hoverIndex:'-1',
+      clientHeight: clientHeight, //可视区域高度;
+    };
+  },
+  mounted() {
+    setInterval(()=>{
+      timerChangeToken().then((response)=>{
+        if(response.data.success){
+          setToken(response.data.token);
+        }else{
+          this.$notification.open({
+            message:'登录异常',
+            description:response.data.message,
+            duration: 2.0,
+          });
+          removeToken();
+          //跳转到登录界面;
+          this.$router.push('/login')
+        }
+      });
+    }, 60000 * 5);
+    timerChangeToken().then((response)=>{
+      if(response.data.success){
+        setToken(response.data.token);
+      }else{
+        this.$notification.open({
+          message:'登录异常',
+          description:response.data.message,
+          duration: 2.0,
+        });
+        removeToken();
+        //跳转到登录界面;
+        this.$router.push('/login')
+      }
+    });
+    // 获取token
+    //获取路由，根据路由确定current的值;
+    // alert(this.$route.path);
+    // this.clickBtn(this.$route.path)
+  },
+  computed: {
+    ...mapGetters(["ReportSerialNumber", "role"]),
+  },
+  methods: {
+    /**
+     * 点击按钮;
+     *
+     */
+    clickBtn: function (typeName) {
+      this.current = typeName;
+    },
+    //跳转到登录界面；
+    goLogin:function(){
+      removeToken()
+      this.$router.push('/login')
+    },
+    // /**
+    //  * 按钮悬浮样式变化;
+    //  */
+    // hoverBtn: function ($event, type, name) {
+    //   if (type == "addClass") {
+    //     $event.currentTarget.className = "ant-btn hight_light_btn";
+    //   } else {
+    //     if (this.current == name) {
+    //     } else {
+    //       $event.currentTarget.className = "ant-btn lost_hover_button";
+    //     }
+    //   }
+    // },
+    hoverSelectBtn: function ($event) {
+      $event.currentTarget.className = "ant-btn hover_select_btn";
+    },
+  },
+};
+</script>
+<style scoped>
+  * {
+    font-family: 'Microsoft YaHei' !important;
+    font-size: 10px;
+  }
+/* 修改btn 悬浮的样式搭配自己的主题; */
+.ant-btn:hover {
+  background-color: #333844;
+  color: white;
+}
+.ant-btn {
+  background-color: #333844;
+  border: 0;
+  color: white;
+  font-size: 14px;
+}
+/* 按钮没有任何事件; */
+.noEventBtn {
+  border: 0;
+  color: #c7c8ca;
+}
+.selectBtn{
+  border: 0;
+  color: #ffffff;
+  background-color: #333844;
+}
+</style>

src/views/home/home1.vue

+<template>
+  <div id="components-layout-demo-basic">
+    <a-layout>
+    <!-- <a-layout-sider>
+       
+    </a-layout-sider> -->
+    <a-layout>
+      <a-layout-header class="header">
+             <!-- logo -->
+        <img :src="logo" class="header_logoImg"/>中盾安信
+        <!-- 仪表盘 + 拓扑图 + 追踪 + 性能剖析 + 告警 -->
+        <div style="margin-left: 20px">
+          <!-- 全局概览 -->
+          <router-link to="/globalOverview">
+            <a-button
+              style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+              icon="appstore"
+              :ghost="current!='globalOverview'&&hoverIndex!='globalOverview'"
+              @click="clickBtn('globalOverview')"
+              @mouseover="hoverIndex = 'globalOverview'"
+              @mouseout="hoverIndex = -1"
+              :class="[current=='globalOverview' ? 'selectBtn' : 'nav',hoverIndex=='globalOverview'?'selectBtn':'nav']"
+            >全局概览
+            </a-button>
+          </router-link>
+          <!-- 交易分析 -->
+          <router-link to="/dashboard">
+            <a-button style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+                      icon="area-chart" :ghost="current!='dashboard'&&hoverIndex!='dashboard'"
+                      :class="[current=='dashboard' ? 'selectBtn' : 'nav',hoverIndex=='dashboard'?'selectBtn':'nav']"
+                      @mouseover="hoverIndex = 'dashboard'" @mouseout="hoverIndex = -1"
+                      @click="clickBtn('dashboard')">
+              交易分析
+            </a-button>
+          </router-link>
+          <!-- 链路图 -->
+          <router-link to="/topology">
+            <a-button style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+                      icon="sliders" :ghost="current!='topology'&&hoverIndex!='topology'"
+                      :class="[current=='topology' ? 'selectBtn' : 'nav',hoverIndex=='topology'?'selectBtn':'nav']"
+                      @mouseover="hoverIndex = 'topology'" @mouseout="hoverIndex = -1"
+                      @click="clickBtn('topology')">
+              链路图<span style="visibility:hidden"></span>
+            </a-button>
+          </router-link>
+           <router-link to="/topology2">
+            <a-button style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+                      icon="sliders" :ghost="current!='topology2'&&hoverIndex!='topology2'"
+                      :class="[current=='topology2' ? 'selectBtn' : 'nav',hoverIndex=='topology2'?'selectBtn':'nav']"
+                      @mouseover="hoverIndex = 'topology2'" @mouseout="hoverIndex = -1"
+                      @click="clickBtn('topology2')">
+              业务拓扑图<span style="visibility:hidden"></span>
+            </a-button>
+          </router-link>
+          <!-- 追踪 -->
+          <!--<router-link to="/trace">
+          <a-button icon="branches" :ghost="current!='trace'&&hoverIndex!='trace'"
+          :class="[current=='trace' ? 'selectBtn' : 'noEventBtn',hoverIndex=='trace'?'selectBtn':'']"
+          @mouseover="hoverIndex = 'trace'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('trace')">
+          追踪
+          </a-button>
+          </router-link>-->
+          <!-- 性能剖析 -->
+          <!--<router-link to="/performanceAnalysis">
+            <a-button icon="info-circle" :ghost="current!='performanceAnalysis'&&hoverIndex!='performanceAnalysis'"
+                      :class="[current=='performanceAnalysis' ? 'selectBtn' : 'noEventBtn',hoverIndex=='performanceAnalysis'?'selectBtn':'']"
+                      @mouseover="hoverIndex = 'performanceAnalysis'" @mouseout="hoverIndex = -1" style="background-color: #333844" @click="clickBtn('performanceAnalysis')">
+              性能剖析
+            </a-button>
+          </router-link>-->
+          <!-- 服务监控 -->
+          <router-link to="/serviceMonitor">
+            <a-button
+              style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+              icon="info-circle"
+              :ghost="current!='serviceMonitor'&&hoverIndex!='serviceMonitor'"
+              :class="[current=='serviceMonitor' ? 'selectBtn' : 'nav',hoverIndex=='serviceMonitor'?'selectBtn':'nav']"
+              @mouseover="hoverIndex = 'serviceMonitor'"
+              @mouseout="hoverIndex = -1"
+              @click="clickBtn('serviceMonitor')"
+            >服务监控
+            </a-button>
+          </router-link>
+          <!--配置管理-->
+          <router-link to="/configurationManagement">
+            <a-button
+              style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+              icon="setting"
+              :ghost="current!='configurationManagement'&&hoverIndex!='configurationManagement'"
+              :class="[current=='configurationManagement' ? 'selectBtn' : 'nav',hoverIndex=='configurationManagement'?'selectBtn':'']"
+              @mouseover="hoverIndex = 'configurationManagement'"
+              @mouseout="hoverIndex = -1"
+              @click="clickBtn('configurationManagement')"
+            >配置管理
+            </a-button>
+          </router-link>
+          <!-- 告警 -->
+          <router-link to="/alarm">
+            <a-button
+              icon="bell"
+              :ghost="current!='alarm'&&hoverIndex!='alarm'"
+              :class="[current=='alarm' ? 'selectBtn' : 'nav',hoverIndex=='alarm'?'selectBtn':'nav']"
+              style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+              @mouseover="hoverIndex = 'alarm'"
+              @mouseout="hoverIndex = -1"
+              @click="clickBtn('alarm')"
+            >告警<span style="visibility:hidden"></span>
+            </a-button>
+          </router-link>
+          <!-- 用户管理 -->
+          <router-link to="/user">
+            <a-button
+              icon="usergroup-add"
+              :ghost="current!='user'&&hoverIndex!='user'"
+              :class="[current=='user' ? 'selectBtn' : 'nav',hoverIndex=='user'?'selectBtn':'nav']"
+              style=" background-color: #eee;color:black;font-size: 20px;height:40px;line-height: 40px;"
+              @mouseover="hoverIndex = 'user'"
+              @mouseout="hoverIndex = -1"
+              @click="clickBtn('user')"
+            >用户管理
+            </a-button>
+          </router-link>
+        </div>
+        <a-dropdown :trigger="['click']" class="logout_btn">
+    <a class="ant-dropdown-link" @click.prevent>
+      <span style="padding-top:10px">{{roles}}</span><span style="padding-left:5px;dispaly:inline-block;font-size:12px">v</span>
+      <DownOutlined />
+    </a>
+    <template #overlay>
+      <a-menu>
+        <a-menu-item>
+          <a @click="goLogin()">注销</a>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+        <!-- <a-button type="default" class="logout_btn" @click="goLogin()">^注销</a-button> -->
+      </a-layout-header>
+      <a-layout-content>
+        <a-config-provider :locale="locale">
+          <router-view></router-view>
+        </a-config-provider>
+      </a-layout-content>
+    </a-layout>
+    </a-layout>
+  </div>
+</template>
+<script>
+  import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+  import $ from 'jquery'
+  import logo from '@/assets/logo.png'
+  import store from "@/store";
+  import {timerChangeToken} from '@/api/user.js'
+  import {mapGetters} from "vuex";
+ 
+  import {
+    getToken,
+    setToken,
+    removeToken,
+  } from "@/utils/auth";
+
+
+  export default {
+    name: "overview",
+      components: {
+   
+  },
+    data() {
+      return {
+        locale: zhCN,
+        current: this.$route.path.split('/')[1],
+        hoverIndex: '-1',
+        logo: logo,
+        roles:sessionStorage.getItem('role')
+      };
+    },
+    mounted() {
+      setInterval(() => {
+        timerChangeToken().then((response) => {
+          if (response.data.success) {
+            setToken(response.data.token);
+          } else {
+            this.$notification.open({
+              message: '登录异常',
+              description: response.data.message,
+              duration: 2.0,
+            });
+            removeToken();
+            //跳转到登录界面;
+            this.$router.push('/login')
+          }
+        });
+      }, 60000 * 5);
+      timerChangeToken().then((response) => {
+        if (response.data.success) {
+          setToken(response.data.token);
+        } else {
+          this.$notification.open({
+            message: '登录异常',
+            description: response.data.message,
+            duration: 2.0,
+          });
+          removeToken();
+          //跳转到登录界面;
+          this.$router.push('/login')
+        }
+      });
+      // 获取token
+      //获取路由，根据路由确定current的值;
+      // alert(this.$route.path);
+      // this.clickBtn(this.$route.path)
+    },
+    computed: {
+      ...mapGetters(["ReportSerialNumber", "role"]),
+    },
+    methods: {
+      /**
+       * 点击按钮;
+       *
+       */
+      clickBtn: function (typeName) {
+        this.current = typeName;
+      },
+      //跳转到登录界面；
+      goLogin: function () {
+        removeToken()
+        sessionStorage.removeItem('role')
+        this.$router.push('/login')
+      },
+      // /**
+      //  * 按钮悬浮样式变化;
+      //  */
+      // hoverBtn: function ($event, type, name) {
+      //   if (type == "addClass") {
+      //     $event.currentTarget.className = "ant-btn hight_light_btn";
+      //   } else {
+      //     if (this.current == name) {
+      //     } else {
+      //       $event.currentTarget.className = "ant-btn lost_hover_button";
+      //     }
+      //   }
+      // },
+      // hoverSelectBtn: function ($event) {
+      //   $event.currentTarget.className = "ant-btn hover_select_btn";
+      // },
+    },
+  };
+</script>
+<style scoped>
+  /*导航栏*/
+  .header {
+    position: relative;
+    display: flex;
+    height: 65px;
+    background-color: #DAFFE0;
+    align-items: center;
+    color: #1c2530;
+    font-family: yuantixi !important;
+    font-weight: bold;
+    font-size: 20px;
+  }
+
+  /*导航栏logo*/
+  .header_logoImg {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    margin-right: 10px;
+  }
+
+  /*注销按钮*/
+  .logout_btn {
+    color: white !important;
+    height: 40px;
+    font-size: 20px;
+    position: absolute;
+    right: 60px;
+    top:0px
+  }
+
+  /*导航栏标签（选项卡）*/
+  .nav {
+    background-color: #cae4cb;
+    color: #1c2530;
+  }
+
+  /* 修改btn 悬浮的样式搭配自己的主题; */
+  .ant-btn:hover {
+    background-color: #eee !important;
+    color: #1c2530 !important;
+  }
+
+  .ant-btn {
+    border: 0;
+    color: #1c2530;
+  }
+
+  .selectBtn {
+    border: 0;
+    color: black;
+    background-color: #cae4cb;
+  }
+  #components-layout-demo-basic {
+  text-align: center;
+}
+#components-layout-demo-basic .ant-layout-header,
+#components-layout-demo-basic .ant-layout-footer {
+  background: rgba(9,74,175,0.7);
+  color: #fff;
+}
+#components-layout-demo-basic .ant-layout-footer {
+  line-height: 1.5;
+}
+#components-layout-demo-basic .ant-layout-sider {
+   background: rgba(9,74,175,0.7);
+  color: #fff;
+  line-height: 60px;
+}
+#components-layout-demo-basic .ant-layout-content {
+  background: rgba(16, 142, 233, 1);
+  color: #fff;
+  min-height: 120px;
+  line-height: 120px;
+}
+#components-layout-demo-basic > .ant-layout {
+  margin-bottom: 48px;
+}
+#components-layout-demo-basic > .ant-layout:last-child {
+  margin: 0;
+}
+</style>

src/views/login/login.vue

+<template>
+  <a-row class="login_container">
+    <a-col span="16">
+      <!-- logo + 系统名 -->
+      <div class="login_container_left">
+        <img style="height:30px;width:30px;border-radius: 5px;" src="../../assets/logo.png"/>
+        <font style="font-size: 20px;margin-left: 10px;">中盾安信</font>
+        <div class="splitLogoName"></div>
+        <span style>流量分析系统</span>
+      </div>
+    </a-col>
+    <a-col span="8" style="margin-top:12%;">
+      <a-row>
+        <!-- 白框部位; -->
+        <a-col span="14" class="login_inputDiv">
+          <div>账户登录</div>
+          <!-- 用户名 -->
+          <div class="input_div">
+            <a-input v-model="userName" placeholder="用户名">
+              <a-icon slot="prefix" type="user"/>
+            </a-input>
+          </div>
+          <!-- 密码 -->
+          <div class="input_div">
+            <a-input type="password" v-model="password" placeholder="密码">
+              <a-icon slot="prefix" type="lock"/>
+            </a-input>
+          </div>
+          <!-- 登录按钮 -->
+          <div class="input_div">
+            <a-button
+              style="width:100%;background-color:#009688;"
+              @keyup.enter="enterSearch"
+              @click="doLogin()"
+              type="primary"
+              size="large"
+            >登录
+            </a-button>
+          </div>
+        </a-col>
+      </a-row>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+  import { login } from '@/api/user.js'
+  import md5 from 'js-md5'
+  import {
+    getToken,
+    setToken,
+    removeToken,
+  } from "@/utils/auth";
+  export default {
+    name: 'search',
+    data() {
+      return {
+        userName: '',
+        password: ''
+      }
+    },
+    created() {
+      this.enterSearch()
+    },
+    mounted() {
+    },
+    computed: {},
+    methods: {
+//回车搜索
+      enterSearch(){
+        document.onkeydown = e =>{
+          //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
+          if (e.key === "Enter" && e.target.baseURI.match(/login/)) {
+            //回车后执行搜索方法
+            this.doLogin()
+          }
+        }
+       },
+      /**
+       * 登录跳转;
+       */
+      doLogin: function() {
+        login(md5(this.userName), md5(this.password)).then((response) => {
+          if (response.data.success) {
+            //登录成功
+            sessionStorage.setItem('role',this.userName)
+            console.log(response.data)
+            this.$message.success('登录成功！', 2)
+            //加到token里面;
+            setToken(response.data.token)
+            this.$router.push('/home')
+          }else{
+            this.$message.error('登录失败！', 2)
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  /* 整个登录界面的大的框架 */
+  .login_container {
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+    background: url("../../assets/background.png");
+    background-size: cover;
+  }
+
+  /* 左边的log + systemName */
+  .login_container_left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 20px;
+    margin-left: 80px;
+    color: white;
+  }
+
+  /* 左边的logo样式 */
+  .login_container_left img {
+    width: 100px;
+    height: 50px;
+  }
+
+  /* logo和系统名称的分割线 */
+  .splitLogoName {
+    height: 30px;
+    border-right: 2px solid white;
+    margin: 0 20px;
+  }
+
+  /* 系统名称的样式 */
+  .login_container_left span {
+    height: 30px;
+    line-height: 30px;
+    font-size: 20px;
+  }
+
+  /* 白框部分 */
+  .login_inputDiv {
+    background-color: white;
+    border-radius: 10px;
+    height: 300px;
+  }
+
+  /* 用户名输入框的外层div */
+  .login_inputDiv div:nth-child(1) {
+    text-align: center;
+    margin-top: 30px;
+    font-size: 24px;
+    color: black;
+  }
+
+  /* 用户名和密码+登录 输入框的外层div */
+  .input_div {
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 30px;
+  }
+</style>

src/views/performanceAnalysis/performanceAnalysis.vue

+<template>
+    <div>performanceAnalysis 性能剖析</div>
+</template>
\ No newline at end of file

src/views/serviceMonitor/serviceMonitor.vue

+<template>
+  <div class="bodyCss" :style="[{ height: (clientHeight-1) + 'px' }]">
+   <div style="background-color:rgba(255,255,255,0.09)">
+     <div class="title" :style="[{ height: 0.11*clientHeight + 'px' }]">
+       <div style="color: white;font-family: 'Times New Roman';position: absolute;left:20px;font-size: 1.5rem;">
+         <div id="nianyueri"><span style="font-family: 'Times New Roman';">{{yearMonthDay.year}}</span>年<span
+           style="font-family: 'Times New Roman';">{{yearMonthDay.month}}</span>月<span
+           style="font-family: 'Times New Roman';">{{yearMonthDay.day}}</span>日
+         </div>
+         <div :style="[{width:widthasd+'px'},{display:'flex'}]">
+           <div style="text-align: left;width:50%;">{{weekNum}}</div>
+           <div style="text-align: right;width:50%;font-family: 'Times New Roman';">
+             {{hourMinutes.hour}}:{{hourMinutes.minutes}}
+           </div>
+         </div>
+       </div>
+       <h1><span style="font-family: 'Times New Roman';">VV</span>互联网接入区</h1>
+     </div>
+     <a-spin  :spinning="loading" :indicator="indicator" >
+     <div style="width:98%;margin-left:1%;display: flex;justify-content: center;"
+          :style="[{ height: 0.89*clientHeight + 'px' }]">
+       <!--左侧-->
+       <div class="sideDiv">
+         <div class="block"
+              :style="[{height:0.23*clientHeight + 'px'},{marginBottom: 0.05*clientHeight + 'px'},{marginTop: 0.02*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText">今日认证 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div class="topDiv">
+             <div class="countNum">
+               <div class="pacakageTitleNameCss">一包</div>
+               <div class="valueNumCss">{{todayAuthFirstCount}}</div>
+             </div>
+           </div>
+           <div class="bottomDiv">
+             <div class="bottomDivContent">
+               <div class="pacakageTitleNameCss">二包</div>
+               <div class="valueNumCss">{{todayAuthSecondCount}}</div>
+             </div>
+           </div>
+         </div>
+         <div class="block" :style="[{height:0.23*clientHeight + 'px'},{marginBottom: 0.05*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText"> 今日开通 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div class="topDiv">
+             <div class="countNum">
+               <div class="pacakageTitleNameCss">一包</div>
+               <div class="valueNumCss">{{todayKaitongFirstCount}}</div>
+             </div>
+           </div>
+           <div class="bottomDiv">
+             <div class="bottomDivContent">
+               <div class="pacakageTitleNameCss">二包</div>
+               <div class="valueNumCss">{{todayKaitongSecondCount}}</div>
+             </div>
+           </div>
+         </div>
+         <div class="block" :style="[{height:0.29*clientHeight + 'px'},{marginBottom: 0.02*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText"> 今日二维码 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div
+             :style="[{height:0.24*clientHeight + 'px'},{marginBottom: 0.02*clientHeight + 'px'},{marginTop: 0.03*clientHeight + 'px'}]">
+             <div :style="[{height:0.12*clientHeight + 'px'},]" class="erCode_div">
+               <div style="display:flex;">
+                 <div class="erCode_title">生码一包</div>
+                 <div class="erCode_content">{{todayCreateCodeFirstCount}}</div>
+               </div>
+               <div style="display: flex;">
+                 <div class="erCode_title">生码二包</div>
+                 <div class="erCode_content">{{todayCreateCodeSecondCount}}</div>
+               </div>
+             </div>
+             <div :style="[{height:0.12*clientHeight + 'px'},]" class="erCode_div">
+               <div style="display:flex;">
+                 <div class="erCode_title">验码一包</div>
+                 <div class="erCode_content">{{todayCodeVerifyFirstCount}}</div>
+               </div>
+               <div style="display: flex;">
+                 <div class="erCode_title">验码二包</div>
+                 <div class="erCode_content">{{todayCodeVerifySecondCount}}</div>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+       <!--中间-->
+       <div style="width:56%;" :style="{marginTop:0.02 * clientHeight + 'px'}">
+         <div style="display: flex;" :style="[{height:0.41 * clientHeight + 'px'},{marginBottom:0.03 * clientHeight + 'px'}]">
+           <div class="chartsDivLeft">
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner_left1"></div>
+             <div class="border_corner_left2"></div>
+             <div class="dataChartsTitle"
+                  :style="[{height:0.05 * clientHeight + 'px'},]">认证数量
+               <span style="font-family: 'Times New Roman';">Top5 (</span>今日<span
+                 style="font-family: 'Times New Roman';">)</span>
+             </div>
+             <div id="todayAuthNumTopFive" :style="[{height:0.36 * clientHeight + 'px'},{width:'100%'}]"></div>
+           </div>
+           <div class="chartsDivRight">
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner_left1"></div>
+             <div class="border_corner_left2"></div>
+             <div class="dataChartsTitle"
+                  :style="[{height:0.05 * clientHeight + 'px'}]">认证数量
+               <span style="font-family: 'Times New Roman';">Top5 (</span>昨日<span
+                 style="font-family: 'Times New Roman';">)</span>
+             </div>
+             <div id="yesterdayAuthNumTopFive" :style="[{height:0.36 * clientHeight + 'px'},{width:'100%'}]"></div>
+           </div>
+         </div>
+         <div style="display: flex;" :style="[{height:0.41 * clientHeight + 'px'}]">
+           <div class="chartsDivLeft">
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner_left1"></div>
+             <div class="border_corner_left2"></div>
+             <div class="dataChartsTitle" :style="[{height:0.05 * clientHeight + 'px'}]">业务站点
+               <span style="font-family: 'Times New Roman';">Top5 (</span>今日<span
+                 style="font-family: 'Times New Roman';">)</span>
+             </div>
+             <div id="todayYwzdTopFive" :style="[{height:0.36 * clientHeight + 'px'},{width:'100%'}]"></div>
+           </div>
+           <div class="chartsDivRight">
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner"></div>
+             <div class="border_corner_left1"></div>
+             <div class="border_corner_left2"></div>
+             <div class="dataChartsTitle"
+                  :style="[{height:0.05 * clientHeight + 'px'}]">业务站点
+               <span style="font-family: 'Times New Roman';">Top5 (</span>昨日<span
+                 style="font-family: 'Times New Roman';">)</span>
+             </div>
+             <div id="yesterdayYwzdTopFive" :style="[{height:0.36 * clientHeight + 'px'},{width:'100%'}]"></div>
+           </div>
+         </div>
+       </div>
+       <!--右侧-->
+       <div class="sideDiv">
+         <div class="block" :style="[{height:0.23*clientHeight + 'px'},{marginBottom: 0.05*clientHeight + 'px'},{marginTop: 0.02*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText">昨日认证 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div class="topDiv">
+             <div class="countNum">
+               <div class="pacakageTitleNameCss">一包</div>
+               <div class="valueNumCss">{{yesterDayAuthFirstCount}}</div>
+             </div>
+           </div>
+           <div class="bottomDiv">
+             <div class="bottomDivContent">
+               <div class="pacakageTitleNameCss">二包</div>
+               <div class="valueNumCss">{{yesterDayAuthSecondCount}}</div>
+             </div>
+           </div>
+         </div>
+         <div class="block" :style="[{height:0.23*clientHeight + 'px'},{marginBottom: 0.05*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText"> 昨日开通 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div class="topDiv">
+             <div class="countNum">
+               <div class="pacakageTitleNameCss">一包</div>
+               <div class="valueNumCss">{{yesterDayKaitongFirstCount}}</div>
+             </div>
+           </div>
+           <div class="bottomDiv">
+             <div class="bottomDivContent">
+               <div class="pacakageTitleNameCss">二包</div>
+               <div class="valueNumCss">{{yesterDayKaitongSecondCount}}</div>
+             </div>
+           </div>
+         </div>
+         <div class="block" :style="[{height:0.29*clientHeight + 'px'},{marginBottom: 0.02*clientHeight + 'px'}]">
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner"></div>
+           <div class="border_corner_left1"></div>
+           <div class="border_corner_left2"></div>
+           <div class="showTitle">
+             <div class="showTitleText"> 昨日二维码 <span style="font-family: 'Times New Roman';">(</span>次<span
+               style="font-family: 'Times New Roman';">)</span></div>
+           </div>
+           <div
+             :style="[{height:0.29*clientHeight + 'px'},{marginBottom: 0.02*clientHeight + 'px'},{marginTop: 0.03*clientHeight + 'px'}]">
+             <div :style="[{height:0.12*clientHeight + 'px'},]" class="erCode_div">
+               <div style="display:flex;">
+                 <div class="erCode_title">生码一包</div>
+                 <div class="erCode_content">{{yesterDayCreateCodeFirstCount}}</div>
+               </div>
+               <div style="display: flex;">
+                 <div class="erCode_title">生码二包</div>
+                 <div class="erCode_content">{{yesterDayCreateCodeSecondCount}}</div>
+               </div>
+               <!--<div style="display:flex;">
+                 <div class="erCode_title">验码一包</div>
+                 <div class="erCode_content">{{yesterDayCodeVerifyFirstCount}}</div>
+               </div>
+               <div style="display: flex;">
+                 <div class="erCode_title">验码二包</div>
+                 <div class="erCode_content">{{yesterDayCodeVerifySecondCount}}</div>
+               </div>-->
+             </div>
+              <div :style="[{height:0.12*clientHeight + 'px'}]"class="erCode_div">
+                <div style="display:flex;">
+                  <div class="erCode_title">验码一包</div>
+                  <div class="erCode_content">{{yesterDayCodeVerifyFirstCount}}</div>
+                </div>
+                <div style="display: flex;">
+                  <div class="erCode_title">验码二包</div>
+                  <div class="erCode_content">{{yesterDayCodeVerifySecondCount}}</div>
+                </div>
+              </div>
+           </div>
+         </div>
+       </div>
+     </div>
+     </a-spin>
+   </div>
+  </div>
+</template>
+
+<script>
+  import { serviceMonitor, ctidDataPacketTodayContrast } from '@/api/user.js'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import $ from 'jquery'
+
+  var timer_time , timer_data
+  var check = function(i) {
+    //方法一，用三元运算符
+    var num
+    i < 10 ? num = '0' + i : num = i
+    return num
+  }
+  const clientHeight = $(window).height() - 64;
+  export default {
+    components: { ACol },
+    name: 'service-monitor',
+    data() {
+      return {
+        loading:false,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        clientHeight,
+        todayCreateCodeFirstCount: 0,//今日二维码 生码 一包
+        todayCodeVerifyFirstCount: 0,//今日二维码 验码 一包
+        yesterDayCreateCodeFirstCount: 0,//昨日二维码 生码 一包
+        yesterDayCodeVerifyFirstCount: 0, //昨日二维码 验码 一包
+        todayCreateCodeSecondCount: 0,//今日二维码 生码 二包
+        todayCodeVerifySecondCount: 0,//今日二维码 验码 二包
+        yesterDayCreateCodeSecondCount: 0,//昨日二维码 生码 二包
+        yesterDayCodeVerifySecondCount: 0, //昨日二维码 验码 二包
+        todayAuthFirstCount: 0,
+        todayAuthSecondCount: 0,
+        todayKaitongFirstCount: 0,
+        todayKaitongSecondCount: 0,
+        todayErcodeShengCount: 0,
+        todayErcodeValidCount: 0,
+        yesterDayAuthFirstCount: 0,
+        yesterDayAuthSecondCount: 0,
+        yesterDayKaitongFirstCount: 0,
+        yesterDayKaitongSecondCount: 0,
+        yesterDayErcodeShengCount: 0,
+        yesterDayErcodeValidCount: 0,
+        widthasd: '',
+        yearMonthDay: {
+          year: '',
+          month: '',
+          day: ''
+        },
+        hourMinutes: {
+          hour: '',
+          minutes: ''
+        },
+        weekNum: ''
+      }
+    },
+    methods: {
+      dealTime() {
+        var b = 24 * 60 * 60 * 1000   //一天的时间
+        var yesterday = new Date()  //当天的时间
+        yesterday.setTime(yesterday.getTime() - b)
+        var dayMon = (yesterday.getMonth() + 1) > 9 ? yesterday.getMonth() + 1 : '0' + (yesterday.getMonth() + 1)
+        var dayDat = yesterday.getDate()> 9 ? yesterday.getDate() : '0' + (yesterday.getDate())
+        var s = yesterday.getFullYear() + '-' + dayMon + '-' + dayDat
+        this.yesterday = s
+        var today = new Date()  //当天的时间
+        today.setTime(today.getTime())
+        var dayMon = (today.getMonth()+ 1) > 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1)
+        var dayDat = (today.getDate() > 9) ? today.getDate() : '0' + (today.getDate())
+        var currentMinute = (today.getMinutes() > 9) ? today.getMinutes() : '0' + (today.getMinutes())
+        var currentHour = (today.getHours() > 9) ? today.getHours() : '0' + (today.getHours())
+        var s = today.getFullYear() + '-' + dayMon + '-' + dayDat
+        var detailToday = today.getFullYear() + '-' + dayMon + '-' + dayDat + ' ' + currentHour + ':' + currentMinute
+        this.today = s
+        this.detailToday = detailToday
+      },
+      initData() {
+        this.loading = true
+        this.dealTime()
+        var timeObj = {
+          yesterday: this.yesterday,
+          todayBeforeDawn: this.today + ' ' + '00:00',
+          currentTime: this.detailToday
+        }
+        serviceMonitor(timeObj).then((response) => {
+          console.log('初始化数据')
+          console.log(response)
+          this.loading = false
+          //认证一包 今天
+          this.todayAuthFirstCount = response.data.todayAuthFirstCount.count
+          //认证一包 昨天
+          this.yesterDayAuthFirstCount = response.data.yesterDayAuthFirstCount.count
+          //认证二包 昨天
+          this.yesterDayAuthSecondCount = response.data.yesterDayAuthSecondCount.count
+          //认证二包 今天
+          this.todayAuthSecondCount = response.data.todayAuthSecondCount.count
+          //开通一包 今天
+          this.todayKaitongFirstCount = response.data.todayKaitongFirstCount.count
+          //开通一包 昨天
+          this.yesterDayKaitongFirstCount = response.data.yesterDayKaitongFirstCount.count
+          //开通二包 今天
+          this.todayKaitongSecondCount = response.data.todayKaitongSecondCount.count
+          //开通二包 昨天
+          this.yesterDayKaitongSecondCount = response.data.yesterDayKaitongSecondCount.count
+          //今日二维码 生码 一包
+          this.todayCreateCodeFirstCount = response.data.todayCreateCodeFirstCount.count
+          //今日二维码 验码 一包
+          this.todayCodeVerifyFirstCount = response.data.todayCodeVerifyFirstCount.count
+          //昨日二维码 生码 一包
+          this.yesterDayCreateCodeFirstCount = response.data.yesterDayCreateCodeFirstCount.count
+          //昨日二维码 验码 一包
+          this.yesterDayCodeVerifyFirstCount = response.data.yesterDayCodeVerifyFirstCount.count
+
+          //今日二维码 生码 二包
+          this.todayCreateCodeSecondCount = response.data.todayCreateCodeSecondCount.count
+          //今日二维码 验码 二包
+          this.todayCodeVerifySecondCount = response.data.todayCodeVerifySecondCount.count
+          //昨日二维码 生码 二包
+          this.yesterDayCreateCodeSecondCount = response.data.yesterDayCreateCodeSecondCount.count
+          //昨日二维码 验码 二包
+          this.yesterDayCodeVerifySecondCount = response.data.yesterDayCodeVerifySecondCount.count
+
+          //画昨天模式认证top5;
+          this.drawYesterDayAuthSecondModeCountTopFive(response.data.yesterDayAuthSecondModeCountTopFive)
+          //画今天模式认证top5;
+          this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+          //画业务站点 Top5 (今日 )
+          this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+          //画业务站点 Top5 (昨日 )
+          this.drawYesterDayAuthSecondYwzdCountTopFive(response.data.yesterDayAuthSecondYwzdCountTopFive)
+          // this.drawYesterDayAuthSecondYwzdCountTopFive([{ywzd:'YWZD123',count:"34"},{ywzd:'YWZD134',count:"64"},{ywzd:'YWZD156',count:"23"},{ywzd:'YWZD156',count:"23"},{ywzd:'YWZD156',count:"23"}]);
+        })
+      },
+      //画昨天模式认证top5;
+      drawYesterDayAuthSecondModeCountTopFive(yesterdayData) {
+        var yesterdayXData = []
+        var yesterdayValue = []
+        for (var i = 0; i < yesterdayData.length; i++) {
+          yesterdayXData.push(yesterdayData[i].mode)
+          yesterdayValue.push(yesterdayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('yesterdayAuthNumTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#0576FF'],
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '9%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: yesterdayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '万次',
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(value) / 1000
+                    return num + 'k'
+                  } else if (value > 10000) {
+                    var num = parseInt(value) / 10000
+                    return num + 'w'
+                  } else {
+                    return value
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#ffffff',
+                fontFamily: 'Times New Roman',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(value.data) / 1000
+                    return num + 'k'
+                  } else if (value.data >= 10000) {
+                    var num = parseInt(value.data) / 10000
+                    return num + 'w'
+                  } else {
+                    return value.data
+                  }
+                }
+              },
+              data: yesterdayValue
+            }
+          ]
+        })
+      },
+      //画今天模式认证top5;
+      drawTodayAuthSecondModeCountTopFive(todayData) {
+        var todayXData = []
+        var todayValue = []
+        for (var i = 0; i < todayData.length; i++) {
+          todayXData.push(todayData[i].mode)
+          todayValue.push(todayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('todayAuthNumTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#0576FF'],
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '9%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: todayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid',
+                  size: '20px'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '万次',
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(value) / 1000
+                    return num + 'k'
+                  } else if (value > 10000) {
+                    var num = parseInt(value) / 10000
+                    return num + 'w'
+                  } else {
+                    return value
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#ffffff',
+                fontFamily: 'Times New Roman',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(value.data) / 1000
+                    return num + 'k'
+                  } else if (value.data >= 10000) {
+                    var num = parseInt(value.data) / 10000
+                    return num + 'w'
+                  } else {
+                    return value.data
+                  }
+                }
+              },
+              data: todayValue
+            }
+          ]
+        })
+      },
+      //画业务站点 Top5 (今日 )
+      drawTodayAuthSecondYwzdCountTopFive(todayData) {
+        var todayXData = []
+        var todayValue = []
+        for (var i = 0; i < todayData.length; i++) {
+          // var tot = todayData[i].ywzd+ todayData[i].ywzdID
+          // todayXData.push(tot)
+          todayXData.push(todayData[i].ywzd)
+          todayValue.push(todayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('todayYwzdTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#0576FF'],
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '9%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: todayXData.map(function (str) {
+                return str.replace(' ', '\n')
+              }),
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid',
+                  size: '20px'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLabel: {
+                interval: 0,
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '万次',
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(value) / 1000
+                    return num + 'k'
+                  } else if (value > 10000) {
+                    var num = parseInt(value) / 10000
+                    return num + 'w'
+                  } else {
+                    return value
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#ffffff',
+                fontFamily: 'Times New Roman',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(value.data) / 1000
+                    return num + 'k'
+                  } else if (value.data >= 10000) {
+                    var num = parseInt(value.data) / 10000
+                    return num + 'w'
+                  } else {
+                    return value.data
+                  }
+                }
+              },
+              data: todayValue
+            }
+          ]
+        })
+      },
+      //画业务站点 Top5 (昨日 )
+      drawYesterDayAuthSecondYwzdCountTopFive(yesterdayData) {
+        var yesterdayXData = []
+        var yesterdayValue = []
+        // debugger
+        console.log("拿到的所有数据")
+        console.log(yesterdayData)
+        for (var i = 0; i < yesterdayData.length; i++) {
+          yesterdayXData.push(yesterdayData[i].ywzd)
+          yesterdayValue.push(yesterdayData[i].count)
+        }
+        // debugger
+        console.log("输出后的X轴数据")
+        console.log(yesterdayXData)
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('yesterdayYwzdTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#0576FF'],
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '9%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: yesterdayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              axisLabel: {
+                interval:0,
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+
+              },
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '万次',
+              axisLine: {
+                lineStyle: {
+                  color: '#ffffff',
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                textStyle: {
+                  fontSize: 12,      //更改坐标轴文字大小
+                  fontFamily: 'Times New Roman'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(value) / 1000
+                    return num + 'k'
+                  } else if (value > 10000) {
+                    var num = parseInt(value) / 10000
+                    return num + 'w'
+                  } else {
+                    return value
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top',
+                color: '#ffffff',
+                fontFamily: 'Times New Roman',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(value.data) / 1000
+                    return num + 'k'
+                  } else if (value.data >= 10000) {
+                    var num = parseInt(value.data) / 10000
+                    return num + 'w'
+                  } else {
+                    return value.data
+                  }
+                }
+              },
+              data: yesterdayValue
+            }
+          ]
+        })
+      },
+      //定时;
+      dingshirenwu() {
+        this.dealTime()
+        var timeObj = {
+          yesterday: this.yesterday,
+          todayBeforeDawn: this.today + ' ' + '00:00',
+          currentTime: this.detailToday
+        }
+
+        ctidDataPacketTodayContrast(timeObj).then((response) => {
+          //认证一包 今天
+          this.todayAuthFirstCount = response.data.todayAuthFirstCount.count
+          //认证二包 今天
+          this.todayAuthSecondCount = response.data.todayAuthSecondCount.count
+          //开通一包 今天
+          this.todayKaitongFirstCount = response.data.todayKaitongFirstCount.count
+          //开通二包 今天
+          this.todayKaitongSecondCount = response.data.todayKaitongSecondCount.count
+          //今日二维码 生码 一包
+          this.todayCreateCodeFirstCount = response.data.todayCreateCodeFirstCount.count
+          //今日二维码 验码 一包
+          this.todayCodeVerifyFirstCount = response.data.todayCodeVerifyFirstCount.count
+          //今日二维码 生码 二包
+          this.todayCreateCodeSecondCount = response.data.todayCreateCodeSecondCount.count
+          //今日二维码 验码 二包
+          this.todayCodeVerifySecondCount = response.data.todayCodeVerifySecondCount.count
+          //画今天模式认证top5;
+          this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+          //画今天业务站点 Top5
+          this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+        })
+      },
+      getShowTime() {
+        //年月日;
+        var date = new Date()
+        this.yearMonthDay = {
+          year: date.getFullYear(),
+          month: date.getMonth() + 1,
+          day: date.getDate()
+        }
+        this.hourMinutes = {
+          hour: check(date.getHours()),
+          minutes: check(date.getMinutes())
+        }
+        this.widthasd = $('#nianyueri').offsetWidth
+        var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        var weekNum = weeks[date.getDay()]
+        this.weekNum = weekNum
+        if (check(date.getHours()) == '00' && check(date.getMinutes()) == '00') {
+          this.initData()
+        }
+      }
+    },
+    mounted() {
+      //定时任务以及 ,
+      this.initData()
+      timer_time = setInterval(() => {
+        setTimeout(this.dingshirenwu())
+      }, 60000)
+      this.getShowTime()
+      //时间显示;
+      timer_data = setInterval(() => {
+        setTimeout(this.getShowTime())
+      }, 2000)
+    },
+    destroyed(){
+      clearInterval(timer_time)
+      clearInterval(timer_data)
+    }
+  }
+</script>
+
+<style scoped>
+  * {
+    font-family: "Microsoft YaHei";
+    font-weight: 200;
+    padding: 0;
+    margin: 0;
+  }
+
+  .chartsDivLeft {
+    width: 47%;
+    margin-left: 2%;
+    margin-right: 1%;
+    position: relative;
+    border: 1px solid #0064a2;
+    color: white;
+    background: linear-gradient(rgba(6, 17, 76, 0.3), rgba(6, 17, 76, 0.7));
+  }
+
+  .chartsDivRight {
+    width: 47%;
+    margin-left: 1%;
+    margin-right: 2%;
+    position: relative;
+    border: 1px solid #0064a2;
+    color: white;
+    background: linear-gradient(rgba(6, 17, 76, 0.3), rgba(6, 17, 76, 0.7));
+  }
+
+  .pacakageTitleNameCss {
+    font-size: 1.7rem;
+    width: 50%;
+    text-align: left;
+    padding: 0 40px;
+  }
+
+  .valueNumCss {
+    font-family: Times New Roman;
+    font-size: 2.5rem;
+    width: 50%;
+    text-align: left;
+  }
+
+  .bodyCss {
+    background-image: url('./bgService.jpg');
+    width: 100%;
+    background-position: center 0;
+    background-size: cover;
+    -webkit-background-size: cover;
+    -o-background-size: cover;
+  }
+
+  .showTitle {
+    position: absolute;
+    top: -12px;
+    left: 40px;
+    width: 100%;
+  }
+
+  .showTitleText {
+    border-radius: 10px;
+    font-size: 1.9rem;
+    text-align: left;
+    color: white;
+    height: 24px;
+    line-height: 24px;
+  }
+
+  /*.shuziCss {*/
+  /*font-famliy: !important;*/
+  /*}*/
+
+  .title {
+    position: relative;
+    font-weight: bolder;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+  }
+
+  .title h1 {
+    color: white;
+    font-size: 2.5rem;
+  }
+
+  .sideDiv {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 21%;
+    height: 100%;
+  }
+
+  .sideDiv .block {
+    width: 95%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border: 1px solid #0064a2;
+    border-top: 0;
+    /*background-color: #ff1aa9;*/
+    background: linear-gradient(rgba(6, 17, 76, 0.4), rgba(6, 17, 76, 0.6));
+  }
+
+  .sideDiv .block .topDiv {
+    width: 100%;
+  }
+
+  .sideDiv .block .topDiv .erjititle {
+    color: white;
+    font-size: 2.2rem;
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+    margin-bottom: 5px;
+  }
+
+  .sideDiv .block .topDiv .countNum {
+    color: yellow;
+    font-size: 3.0rem;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .sideDiv .block .bottomDiv {
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .border_corner_left1 {
+    position: absolute;
+    background-color: #7e80b1;
+    width: 3px;
+    height: 30px;
+    left: -2px;
+    top: -2px;
+  }
+
+  .border_corner_left2 {
+    position: absolute;
+    background-color: #7e80b1;
+    width: 30px;
+    height: 3px;
+    left: -2px;
+    top: -2px;
+  }
+
+  .bottomDivTitle {
+    color: white;
+    font-size: 2.2rem;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 5px;
+  }
+
+  .bottomDivContent {
+    color: yellow;
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+  }
+
+  .dataChartsTitle {
+    text-align: center;
+    font-size: 1.9rem;
+  }
+
+  .erCode_title {
+    font-size: 1.7rem;
+    width: 50%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    color: yellow;
+    padding-left: 40px;
+  }
+
+  .erCode_content {
+    font-size: 2.5rem;
+    width: 50%;
+    font-family: "Times New Roman";
+    color: yellow;
+  }
+
+  .erCode_div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>

src/views/serviceMonitor/serviceMonitor1.vue

+<template >
+<!-- :style="{ height: (clientHeight-65) + 'px' }" -->
+  <div  class="bodyCss" >
+    <a-spin  :spinning="loading" :indicator="indicator" >
+      <!--时间和标题-->
+      <div class="header">
+        <div class="header_time">
+          {{yearMonthDay.year}}年{{yearMonthDay.month}}月{{yearMonthDay.day}}日 {{weekNum}}
+          {{hourMinutes.hour}}:{{hourMinutes.minutes}}
+        </div>
+        <div class="header_title">
+          VV <font style="font-family:YouYuan!important;">互联网接入区</font>
+        </div>
+      </div>
+
+      <!--主要内容-->
+      <div style="display: flex;">
+        <div class="sideDiv_left">
+
+         <div class="plate1">
+            <div class="plate_title">今日认证(次)</div>
+            <div class="plate_content">
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">一包</div>
+                <div class="plate_content_data ">{{todayAuthFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title">二包</div>
+                <div class="plate_content_data ">{{todayAuthSecondCount}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="plate">
+            <div class="plate_title">今日开通(次)</div>
+            <div class="plate_content">
+              <!--一包-->
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">移动一包</div>
+                <div class="plate_content_data">{{todayKaitongFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">移动二包</div>
+                <div class="plate_content_data">{{todayKaitongSecondCount}}</div>
+              </div>
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">固定包</div>
+                <div class="plate_content_data">{{todayKaitongGuDingCount}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="plate" style="height: 310px;">
+            <div class="plate_title">今日二维码(次)</div>
+            <div class="plate_content " style="padding-top:50px;">
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">生码一包</div>
+                <div class="plate_content_data ercode_data">{{todayCreateCodeFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">生码二包</div>
+                <div class="plate_content_data ercode_data">{{todayCreateCodeSecondCount}}</div>
+              </div>
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">验码一包</div>
+                <div class="plate_content_data ercode_data">{{todayCodeVerifyFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">验码二包</div>
+                <div class="plate_content_data ercode_data">{{todayCodeVerifySecondCount}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--中间-->
+        <div style="margin-left:42px;" >
+          <div style="display: flex;" >
+            <div class="plate_middle" style="border: 2px solid #E2945F;height: 300px">
+              <div class="plate_middle_title">认证数量Top5(昨日)</div>
+              <div class="plate_content_middle">
+                <div id="yesterdayAuthNumTopFive" class="zhexiantu" style="height: 290px"></div>
+              </div>
+            </div>
+            <div class="plate_middle" style="border: 2px solid #E5E5E5;margin-left:28px;height: 300px">
+              <div class="plate_middle_title" >业务站点Top5(昨日)</div>
+              <div class="plate_content_middle">
+                <div id="yesterdayYwzdTopFive" class="zhexiantu" style="height: 290px"></div>
+              </div>
+            </div>
+          </div>
+          <div style="color: #ffffff;height: 50px;font-size: 24px;line-height: 10px;display: inline-block;position: relative;top: -40px">当前查询模式:</div>
+         <span style="display: inline-block;cursor:pointer;" @click="startAndEnd()">
+          <span style="display: inline-block;color: #ffffff;font-size: 24px;margin-left: 10px;position: relative;top: -40px">{{this.selectmode}}</span>
+         </span>
+
+          <a-modal
+            style="z-index:99999"
+            v-model="visible" title="请选择查询模式" on-ok="handleOk"
+          >
+            <a-select style="width: 35%;margin-left: 5%" v-model="selectModel">
+                 <a-select-option value="0" >10分钟</a-select-option>
+                <a-select-option value="1">30分钟</a-select-option>
+                <a-select-option value="2">1小时</a-select-option>
+              <a-select-option value="3">今日</a-select-option>
+               </a-select>
+<!--            <a-range-picker-->
+<!--              style="z-index:99999"-->
+<!--              show-time-->
+<!--              v-model="value1"-->
+<!--              format="YYYY-MM-DD HH:mm"-->
+<!--            />-->
+
+            <a-button @click="defaultRoleBack"  style="margin-left:5%;color: cornflowerblue;border: 1px solid #eee" type="primary" ghost>恢复默认</a-button>
+            <template slot="footer">
+              <a-button key="back" @click="handleCancel">
+                取消
+              </a-button>
+              <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+                查询
+              </a-button>
+            </template>
+          </a-modal>
+
+          <div style="display: flex;position: relative;top: -20px">
+            <div class="plate_middle" style="height: 300px">
+              <div class="plate_middle_title">认证数量Top5({{selectmode}})</div>
+              <div class="plate_content_middle">
+                <!--<div style="width:100%;height:100%;z-index:9;filter: blur(5px);background-color:rgba(44,108,131,0.77);position: absolute"></div>-->
+                <div id="todayAuthNumTopFive" class="zhexiantu" style="z-index:999;height: 290px"></div>
+              </div>
+            </div>
+            <div class="plate_middle" style="margin-left:28px;border: 2px solid #E5E5E5;height: 300px">
+              <div class="plate_middle_title">业务站点Top5({{selectmode}})</div>
+              <div class="plate_content_middle">
+                <div id="todayYwzdTopFive" class="zhexiantu" style="height: 290px"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--右侧-->
+        <div class="sideDiv_right">
+          <div class="plate1">
+            <div class="plate_title">昨日认证(次)</div>
+            <div class="plate_content">
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">一包</div>
+                <div class="plate_content_data right_data_color">{{yesterDayAuthFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">二包</div>
+                <div class="plate_content_data right_data_color">{{yesterDayAuthSecondCount}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="plate">
+            <div class="plate_title">昨日开通(次)</div>
+            <div class="plate_content">
+              <!--一包-->
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">移动一包</div>
+                <div class="plate_content_data right_data_color">{{yesterDayKaitongFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">移动二包</div>
+                <div class="plate_content_data right_data_color">{{yesterDayKaitongSecondCount}}</div>
+              </div>
+              <div style="display: flex;margin-top:-60px">
+                <div class="plate_content_title" style="width: 50%">固定包</div>
+                <div class="plate_content_data right_data_color">{{yesterDayKaitongGuDingCount}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="plate" style="height: 310px;">
+            <div class="plate_title">昨日二维码(次)</div>
+            <div class="plate_content" style="padding-top:50px;">
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">生码一包</div>
+                <div class="plate_content_data right_data_color ercode_data">{{yesterDayCreateCodeFirstCount}}</div>
+                <!--<div class="plate_content_data right_data_color ercode_data">23568912</div>-->
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">生码二包</div>
+                <div class="plate_content_data right_data_color ercode_data">{{yesterDayCreateCodeSecondCount}}</div>
+              </div>
+              <!--一包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">验码一包</div>
+                <div class="plate_content_data right_data_color ercode_data">{{yesterDayCodeVerifyFirstCount}}</div>
+              </div>
+              <!--二包-->
+              <div style="display: flex;margin-top:-50px">
+                <div class="plate_content_title">验码二包</div>
+                <div class="plate_content_data right_data_color ercode_data">{{yesterDayCodeVerifySecondCount}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+  import {serviceMonitor, ctidDataPacketTodayContrast,selectctidDataPacketHistoryContrast} from '@/api/user.js'
+  import ACol from 'ant-design-vue/es/grid/Col'
+  import $ from 'jquery'
+  import moment from 'moment';
+  var timer_time, timer_data
+  var check = function (i) {
+    //方法一，用三元运算符
+    var num
+    i < 10 ? num = '0' + i : num = i
+    return num
+  }
+  const clientHeight = $(window).height();
+  export default {
+    components: {ACol},
+    name: 'service-monitor',
+    data() {
+      return {
+        value1:[],
+        visible: false,
+        confirmLoading: false,
+        yesterdayStart:null,
+        yesterdayEnd:null,
+        todayStart:null,
+        todayEnd:null,
+        loading:false,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        clientHeight,
+        todayCreateCodeFirstCount: 0,//今日二维码 生码 一包
+        todayCodeVerifyFirstCount: 0,//今日二维码 验码 一包
+        yesterDayCreateCodeFirstCount: 0,//昨日二维码 生码 一包
+        yesterDayCodeVerifyFirstCount: 0, //昨日二维码 验码 一包
+        todayCreateCodeSecondCount: 0,//今日二维码 生码 二包
+        todayCodeVerifySecondCount: 0,//今日二维码 验码 二包
+        yesterDayCreateCodeSecondCount: 0,//昨日二维码 生码 二包
+        yesterDayCodeVerifySecondCount: 0, //昨日二维码 验码 二包
+        todayAuthFirstCount: 0,
+        todayAuthSecondCount: 0,
+        todayKaitongFirstCount: 0,
+        todayKaitongSecondCount: 0,
+        todayKaitongGuDingCount: 0,
+        yesterDayKaitongGuDingCount:0,
+        todayErcodeShengCount: 0,
+        todayErcodeValidCount: 0,
+        yesterDayAuthFirstCount: 0,
+        yesterDayAuthSecondCount: 0,
+        yesterDayKaitongFirstCount: 0,
+        yesterDayKaitongSecondCount: 0,
+        yesterDayErcodeShengCount: 0,
+        yesterDayErcodeValidCount: 0,
+        widthasd: '',
+        selectmode:'',
+        selectModel:'0',
+        yearMonthDay: {
+          year: '',
+          month: '',
+          day: ''
+        },
+        hourMinutes: {
+          hour: '',
+          minutes: '',
+          seconds: ''
+        },
+        weekNum: ''
+      }
+    },
+    methods: {
+      moment,
+      range(start, end) {
+        const result = [];
+        for (let i = start; i < end; i++) {
+          result.push(i);
+        }
+        return result;
+      },
+
+
+      disabledDateTime() {
+        return {
+          disabledHours: () => this.range(0, 24).splice(4, 20),
+          disabledMinutes: () => this.range(30, 60),
+          disabledSeconds: () => [55, 56],
+        };
+      },
+
+      // disabledRangeTime(_, type) {
+      //   if (type === 'start') {
+      //     return {
+      //       disabledHours: () => this.range(0, 60).splice(4, 20),
+      //       disabledMinutes: () => this.range(30, 60),
+      //       disabledSeconds: () => [55, 56],
+      //     };
+      //   }
+      //   return {
+      //     disabledHours: () => this.range(0, 60).splice(20, 4),
+      //     disabledMinutes: () => this.range(0, 31),
+      //     disabledSeconds: () => [55, 56],
+      //   };
+      // },
+      showModal() {
+        this.visible = true;
+      },
+      //恢复默认
+      defaultRoleBack(){
+        this.datatimestartend();
+        this.makeTime('0')
+        selectctidDataPacketHistoryContrast(this.todayStart,this.todayEnd).then((response) => {
+          this.selectmode="10分钟";
+          this.selectModel="0";
+          this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+          this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+        })
+        this.visible = false;
+      },
+      handleOk(e) {
+        //根据时间选择器的时间对应不同的查询条件
+        this.makeTime(this.selectModel);
+        this.loading = true;
+        setTimeout(() => {
+          this.visible = false;
+          this.loading = false;
+          this.importfiles();
+        }, 200);
+
+      },
+      handleCancel(e) {
+        this.visible = false;
+        // this.value1 = null
+      },
+      startAndEnd(){
+        this.value1=[]
+        this.visible = true
+        this.value1[0]=this.yesterdayStart
+        this.value1[1]=this.yesterdayEnd
+      },
+      //服务监控查询
+      importfiles(){
+        // var d = new Date(this.value1[0])
+        // var startTime =
+        //   d.getFullYear() +
+        //   '-' +
+        //   ((d.getMonth() + 1)<10 ? "0"+(d.getMonth() + 1):d.getMonth() + 1) +
+        //   '-' +
+        //   ((d.getDate()<10 ? "0"+d.getDate():d.getDate())) +
+        //   ' ' +
+        //   ((d.getHours()<10 ? "0"+d.getHours():d.getHours())) +
+        //   ':' +
+        //   ((d.getMinutes()<10 ? "0"+d.getMinutes():d.getMinutes()))
+        // // console.log(startTime)
+        // var d2 = new Date(this.value1[1])
+        // var endTime =
+        //   d2.getFullYear() +
+        //   '-' +
+        //   ((d2.getMonth() + 1)<10 ? "0"+(d2.getMonth() + 1):d2.getMonth() + 1) +
+        //   '-' +
+        //   ((d2.getDate()<10 ? "0"+d2.getDate():d2.getDate())) +
+        //   ' ' +
+        //   ((d2.getHours()<10 ? "0"+d2.getHours():d2.getHours())) +
+        //   ':' +
+        //   ((d2.getMinutes()<10 ? "0"+d2.getMinutes():d2.getMinutes()))
+
+        selectctidDataPacketHistoryContrast(this.todayStart,this.todayEnd).then((response) => {
+          this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+          this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+        })
+      },
+      datatimestartend(){
+        var b = 24 * 60 * 60 * 1000   //一天的时间
+        var yesterday = new Date()  //当天的时间
+        yesterday.setTime(yesterday.getTime() - b)
+        var dayMon = (yesterday.getMonth() + 1) > 9 ? yesterday.getMonth() + 1 : '0' + (yesterday.getMonth() + 1)
+        var dayDat = yesterday.getDate() > 9 ? yesterday.getDate() : '0' + (yesterday.getDate())
+        var s = yesterday.getFullYear() + '-' + dayMon + '-' + dayDat
+        this.yesterdayStart = s+" 00:00"
+        this.yesterdayEnd = s+ " 23:59"
+
+      },
+      dealTime() {
+        var b = 24 * 60 * 60 * 1000   //一天的时间
+        var yesterday = new Date()  //当天的时间
+        yesterday.setTime(yesterday.getTime() - b)
+        var dayMon = (yesterday.getMonth() + 1) > 9 ? yesterday.getMonth() + 1 : '0' + (yesterday.getMonth() + 1)
+        var dayDat = yesterday.getDate() > 9 ? yesterday.getDate() : '0' + (yesterday.getDate())
+        var s = yesterday.getFullYear() + '-' + dayMon + '-' + dayDat
+        this.yesterday = s
+
+        var today = new Date()  //当天的时间
+        today.setTime(today.getTime())
+        var dayMon = (today.getMonth() + 1) > 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1)
+        var dayDat = (today.getDate() > 9) ? today.getDate() : '0' + (today.getDate())
+        var currentMinute = (today.getMinutes() > 9) ? today.getMinutes() : '0' + (today.getMinutes())
+        var currentHour = (today.getHours() > 9) ? today.getHours() : '0' + (today.getHours())
+        var s = today.getFullYear() + '-' + dayMon + '-' + dayDat
+        var detailToday = today.getFullYear() + '-' + dayMon + '-' + dayDat + ' ' + currentHour + ':' + currentMinute
+        this.today = s
+        this.detailToday = detailToday
+      },
+      makeTime(value){
+        if(value=="0"){
+          //10min
+          var a = 1000*60*10;
+          this.selectmode = "10分钟"
+        }else if(value=="1"){
+          //30min
+          var a = 1000*60*30;
+          this.selectmode = "30分钟"
+        }else if(value=="2"){
+          //1hour
+          var a = 1000*60*60;
+          this.selectmode = "1小时"
+        }
+        var today = new Date()  //当天的时间
+        today.setTime(today.getTime())
+        var dayMon = (today.getMonth() + 1) > 9 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1)
+        var dayDat = (today.getDate() > 9) ? today.getDate() : '0' + (today.getDate())
+        var currentMinute = (today.getMinutes() > 9) ? today.getMinutes() : '0' + (today.getMinutes())
+        var currentHour = (today.getHours() > 9) ? today.getHours() : '0' + (today.getHours())
+        var s = today.getFullYear() + '-' + dayMon + '-' + dayDat
+        var detailToday = today.getFullYear() + '-' + dayMon + '-' + dayDat + ' ' + currentHour + ':' + currentMinute
+        if(value!="3"){
+          var history = new Date();
+          history.setTime(history.getTime()-a)
+          var dayMon = (history.getMonth() + 1) > 9 ? history.getMonth() + 1 : '0' + (history.getMonth() + 1)
+          var dayDat = history.getDate() > 9 ? history.getDate() : '0' + (history.getDate())
+          var currentMinute = (history.getMinutes() > 9) ? history.getMinutes() : '0' + (history.getMinutes())
+          var currentHour = (history.getHours() > 9) ? history.getHours() : '0' + (history.getHours())
+          //开始时间
+          var beginTime = history.getFullYear() + '-' + dayMon + '-' + dayDat + ' ' + currentHour + ':' + currentMinute
+
+        }else{
+          this.selectmode = "今日"
+          var beginTime = s+" "+"00:00"
+        }
+        this.todayStart=beginTime
+        this.todayEnd = detailToday
+      },
+      initData() {
+        this.loading = true
+        this.selectmode = '10分钟'
+        this.dealTime()
+        var timeObj = {
+          yesterday: this.yesterday,
+          todayBeforeDawn: this.today + ' ' + '00:00',
+          currentTime: this.detailToday
+        }
+        this.todayStart = this.today + ' ' + '00:00',
+        this.todayEnd = this.detailToday
+        serviceMonitor(timeObj).then((response) => {
+          this.loading = false
+          //认证一包 今天
+          this.todayAuthFirstCount = response.data.todayAuthFirstCount.count
+          //认证一包 昨天
+          this.yesterDayAuthFirstCount = response.data.yesterDayAuthFirstCount.count
+          //认证二包 昨天
+          this.yesterDayAuthSecondCount = response.data.yesterDayAuthSecondCount.count
+          //认证二包 今天
+          this.todayAuthSecondCount = response.data.todayAuthSecondCount.count
+          //开通一包 今天
+          this.todayKaitongFirstCount = response.data.todayKaitongFirstCount.count
+          //开通一包 昨天
+          this.yesterDayKaitongFirstCount = response.data.yesterDayKaitongFirstCount.count
+          //开通二包 今天
+          this.todayKaitongSecondCount = response.data.todayKaitongSecondCount.count
+          //开通二包 昨天
+          this.yesterDayKaitongSecondCount = response.data.yesterDayKaitongSecondCount.count
+          //固定包
+          this.todayKaitongGuDingCount = response.data.todayKaitongGuDingCount.count
+          //固定包 昨天
+          this.yesterDayKaitongGuDingCount = response.data.yesterDayKaitongGuDingCount.count
+          //今日二维码 生码 一包
+          this.todayCreateCodeFirstCount = response.data.todayCreateCodeFirstCount.count
+          //今日二维码 验码 一包
+          this.todayCodeVerifyFirstCount = response.data.todayCodeVerifyFirstCount.count
+          //昨日二维码 生码 一包
+          this.yesterDayCreateCodeFirstCount = response.data.yesterDayCreateCodeFirstCount.count
+          //昨日二维码 验码 一包
+          this.yesterDayCodeVerifyFirstCount = response.data.yesterDayCodeVerifyFirstCount.count
+
+          //今日二维码 生码 二包
+          this.todayCreateCodeSecondCount = response.data.todayCreateCodeSecondCount.count
+          //今日二维码 验码 二包
+          this.todayCodeVerifySecondCount = response.data.todayCodeVerifySecondCount.count
+          //昨日二维码 生码 二包
+          this.yesterDayCreateCodeSecondCount = response.data.yesterDayCreateCodeSecondCount.count
+          //昨日二维码 验码 二包
+          this.yesterDayCodeVerifySecondCount = response.data.yesterDayCodeVerifySecondCount.count
+
+          //画昨天模式认证top5;
+          this.drawYesterDayAuthSecondModeCountTopFive(response.data.yesterDayAuthSecondModeCountTopFive)
+          //画今天模式认证top5;
+          this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+          //画业务站点 Top5 (今日 )
+          this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+          // this.drawTodayAuthSecondYwzdCountTopFive([{ywzd:'YWZD1',corporateName:'业务站点1',count:"321214"},{ywzd:'业务站点2',corporateName:'业务站点2',count:"64"},{ywzd:'YWZD3',corporateName:'业务站点3',count:"16771214"},{ywzd:'YWZD4',corporateName:'业务站点4',count:"23222623"},{ywzd:'YWZD5',corporateName:'业务站点5',count:"2212231"}])
+          //画业务站点 Top5 (昨日 )
+          this.drawYesterDayAuthSecondYwzdCountTopFive(response.data.yesterDayAuthSecondYwzdCountTopFive)
+          // this.drawYesterDayAuthSecondYwzdCountTopFive([{ywzd:'YWZD1',corporateName:'业务站点1',count:"2300"},{ywzd:'YWZD2',corporateName:'业务站点2',count:"236"},{ywzd:'YWZD3',corporateName:'业务站点3',count:"9865213"},{ywzd:'YWZD4',corporateName:'业务站点4',count:"23222623"},{ywzd:'YWZD5',corporateName:'业务站点5',count:"2212231"}]);
+        })
+      },
+      //画昨天模式认证top5;
+      drawYesterDayAuthSecondModeCountTopFive(yesterdayData) {
+        var yesterdayXData = []
+        var yesterdayValue = []
+        for (var i = 0; i < yesterdayData.length; i++) {
+          yesterdayXData.push(yesterdayData[i].mode)
+          yesterdayValue.push(yesterdayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('yesterdayAuthNumTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#F2F2BC'],
+          grid: {
+            left: '1%',
+            right: '1%',
+            top: '15%',
+            bottom: '5%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: yesterdayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#9DA6D9',
+                  width: 2,
+                  type: 'solid'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 16,      //更改坐标轴文字大小
+                  fontFamily: 'yuantixi'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '次',
+              axisLine: {
+                lineStyle: {
+                  color: '#9DA6D9',
+                  width: 2,
+                  type: 'solid'
+                },
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 20,      //更改坐标轴文字大小
+                  fontFamily: 'yuanticu'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(parseInt(value) / 1000)
+                    return num + 'k'
+                  } else if (value >= 10000 && value < 10000000) {
+                    var num = parseInt(parseInt(value) / 10000)
+                    return num + 'w'
+                  } else if (value >= 10000000 ) {
+                    // var num = parseInt(parseInt(value) / 10000000)
+                    var num = (parseInt(value) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value)
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: 37,
+              label: {
+                show: true,
+                position: 'top',
+                color: '#ffffff',
+                fontSize: 16,
+                fontFamily: 'yuantixi',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(parseInt(value.data) / 1000)
+                    return num + 'k'
+                  } else if (value.data >= 10000 && value.data < 10000000) {
+                    var num = parseInt(parseInt(value.data) / 10000)
+                    return num + 'w'
+                  } else if (value.data >= 10000000 ) {
+                    var num = (parseInt(value.data) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value.data)
+                  }
+                }
+              },
+              data: yesterdayValue
+            }
+          ]
+        })
+      },
+      //画今天模式认证top5;
+      drawTodayAuthSecondModeCountTopFive(todayData) {
+        var todayXData = []
+        var todayValue = []
+        for (var i = 0; i < todayData.length; i++) {
+          todayXData.push(todayData[i].mode)
+          todayValue.push(todayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('todayAuthNumTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          color: ['#EEB691'],
+          grid: {
+            left: '1%',
+            right: '1%',
+            top: '15%',
+            bottom: '5%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: todayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#9DA6D9',
+                  width: 2,
+                  type: 'solid',
+                  size: 16
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#FFFFFF',
+                  fontSize: 16,      //更改坐标轴文字大小
+                  fontFamily: 'yuantixi'
+                }
+              }
+            }
+          ],
+          yAxis:{
+              type: 'value',
+              name: '次',
+              axisLine: {
+                lineStyle: {
+                  color: '#9DA6D9',
+                  width: 2,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#FFFFFF',
+                  fontSize: 20,      //更改坐标轴文字大小
+                  fontFamily: 'yuanticu'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(parseInt(value) / 1000)
+                    return num + 'k'
+                  } else if (value >= 10000 && value < 10000000) {
+                    var num = parseInt(parseInt(value) / 10000)
+                    return num + 'w'
+                  } else if (value >= 10000000 ) {
+                    // var num = parseInt(parseInt(value) / 10000000)
+                    var num = (parseInt(value) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value)
+                  }
+                }
+              }
+            },
+          series: [
+            {
+              type: 'bar',
+              barWidth: 37,
+              label: {
+                show: true,
+                position: 'top',
+                fontSize: 16,
+                fontFamily: 'yuantixi',
+                color: '#ffffff',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(parseInt(value.data) / 1000)
+                    return num + 'k'
+                  } else if (value.data >= 10000 && value.data < 10000000) {
+                    var num = parseInt(parseInt(value.data) / 10000)
+                    return num + 'w'
+                  } else if (value.data >= 10000000 ) {
+                    var num = (parseInt(value.data) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value.data)
+                  }
+                }
+              },
+              data: todayValue
+            }
+          ]
+        })
+      },
+      //画业务站点 Top5 (今日 )
+      drawTodayAuthSecondYwzdCountTopFive(todayData) {
+        var todayXData = []
+        var todayValue = []
+        for (var i = 0; i < todayData.length; i++) {
+          todayXData.push(todayData[i].ywzd)
+          todayValue.push(todayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('todayYwzdTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            },
+            formatter(params){
+              var index = params[0].dataIndex
+              return `<span style="color:white;">`+todayData[index].corporateName+`</span><br/>`+`<div style="display: flex;align-items: center;"><div style="width:10px;height:10px;border-radius:5px;background-color: #f2f2bc;"></div
+><div style="margin-left:5px;">`+todayData[index].count+`</div></div>`
+            }
+          },
+          grid: {
+            left: '1%',
+            right: '1%',
+            top: '15%',
+            bottom: '5%',
+            containLabel: true
+          },
+          color: ['#EEB691'],
+          xAxis: [
+            {
+              type: 'category',
+              data: todayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#80B2F2',
+                  width: 2,
+                  type: 'solid',
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 14,      //更改坐标轴文字大小
+                  fontFamily: 'yuantixi'
+                }
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '次',
+              axisLine: {
+                lineStyle: {
+                  color: '#80B2F2',
+                  width: 2,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 20,      //更改坐标轴文字大小
+                  fontFamily: 'yuanticu'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(parseInt(value) / 1000)
+                    return num + 'k'
+                  } else if (value >= 10000 && value < 10000000) {
+                    var num = parseInt(parseInt(value) / 10000)
+                    return num + 'w'
+                  } else if (value >= 10000000 ) {
+                    var num = (parseInt(value) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value)
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: 37,
+              label: {
+                show: true,
+                position: 'top',
+                fontSize: 16,
+                fontFamily: 'yuantixi',
+                color: '#ffffff',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(parseInt(value.data) / 1000)
+                    return num + 'k'
+                  } else if (value.data >= 10000 && value.data < 10000000) {
+                    var num = parseInt(parseInt(value.data) / 10000)
+                    return num + 'w'
+                  } else if (value.data >= 10000000 ) {
+                    var num = (parseInt(value.data) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value.data)
+                  }
+                }
+              },
+              data: todayValue
+            }
+          ]
+        })
+      },
+      //画业务站点 Top5 (昨日 )
+      drawYesterDayAuthSecondYwzdCountTopFive(yesterdayData) {
+        var yesterdayXData = []
+        var yesterdayValue = []
+        for (var i = 0; i < yesterdayData.length; i++) {
+          yesterdayXData.push(yesterdayData[i].ywzd)
+          yesterdayValue.push(yesterdayData[i].count)
+        }
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(
+          document.getElementById('yesterdayYwzdTopFive')
+        )
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            },
+            formatter(params){
+              var index = params[0].dataIndex
+              return `<span style="color:white;">`+yesterdayData[index].corporateName+`</span><br/>`+`<div style="display: flex;align-items: center;"><div style="width:10px;height:10px;border-radius:5px;background-color: #f2f2bc;"></div
+><div style="margin-left:5px;">`+yesterdayData[index].count+`</div></div>`
+            }
+          },
+          color: ['#F2F2BC'],
+          grid: {
+            left: '1%',
+            right: '1%',
+            top: '15%',
+            bottom: '5%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: yesterdayXData,
+              axisLine: {
+                lineStyle: {
+                  color: '#80B2F2',
+                  width: 2,
+                  type: 'solid'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 14,      //更改坐标轴文字大小
+                  fontFamily: 'yuantixi'
+                }
+              },
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '次',
+              axisLine: {
+                lineStyle: {
+                  color: '#80B2F2',
+                  width: 2,
+                  type: 'solid'
+                }
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: 'dotted'
+                }
+              },
+              axisLabel: {
+                show: true,
+                interval:0,
+                textStyle: {
+                  color: '#fff',
+                  fontSize: 20,      //更改坐标轴文字大小
+                  fontFamily: 'yuanticu'
+                },
+                formatter(value) {
+                  if (value >= 1000 && value < 10000) {
+                    var num = parseInt(parseInt(value) / 1000)
+                    return num + 'k'
+                  } else if (value >= 10000 && value < 10000000) {
+                    var num = parseInt(parseInt(value) / 10000)
+                    return num + 'w'
+                  } else if (value >= 10000000 ) {
+                    var num = (parseInt(value) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value)
+                  }
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              type: 'bar',
+              barWidth: 37,
+              label: {
+                show: true,
+                position: 'top',
+                fontSize: 16,
+                fontFamily: 'yuantixi',
+                color: '#ffffff',
+                formatter(value) {
+                  if (value.data >= 1000 && value.data < 10000) {
+                    var num = parseInt(parseInt(value.data) / 1000)
+                    return num + 'k'
+                  } else if (value.data >= 10000 && value.data < 10000000) {
+                    var num = parseInt(parseInt(value.data) / 10000)
+                    return num + 'w'
+                  } else if (value.data >= 10000000 ) {
+                    var num = (parseInt(value.data) / 10000000).toFixed(1)
+                    return num + 'kw'
+                  } else {
+                    return parseInt(value.data)
+                  }
+                }
+              },
+              data: yesterdayValue
+            }
+          ]
+        })
+      },
+      //定时;
+      dingshirenwu() {
+        this.dealTime()
+        var timeObj = {
+          yesterday: this.yesterday,
+          todayBeforeDawn: this.today + ' ' + '00:00',
+          currentTime: this.detailToday
+        }
+        this.loading = true
+        if(this.selectmode=="今日"){
+          ctidDataPacketTodayContrast(timeObj).then((response) => {
+            this.loading = false
+            //认证一包 今天
+            this.todayAuthFirstCount = response.data.todayAuthFirstCount.count
+            //认证二包 今天
+            this.todayAuthSecondCount = response.data.todayAuthSecondCount.count
+            //开通一包 今天
+            this.todayKaitongFirstCount = response.data.todayKaitongFirstCount.count
+            //开通二包 今天
+            this.todayKaitongSecondCount = response.data.todayKaitongSecondCount.count
+            //开通固定包
+            this.todayKaitongGuDingCount = response.data.todayKaitongGuDingCount.count
+            //今日二维码 生码 一包
+            this.todayCreateCodeFirstCount = response.data.todayCreateCodeFirstCount.count
+            //今日二维码 验码 一包
+            this.todayCodeVerifyFirstCount = response.data.todayCodeVerifyFirstCount.count
+            //今日二维码 生码 二包
+            this.todayCreateCodeSecondCount = response.data.todayCreateCodeSecondCount.count
+            //今日二维码 验码 二包
+            this.todayCodeVerifySecondCount = response.data.todayCodeVerifySecondCount.count
+            //画今天模式认证top5;
+            this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+            //画今天业务站点 Top5
+            this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+            //画昨天模式认证top5;
+            // this.drawYesterDayAuthSecondModeCountTopFive(response.data.yesterDayAuthSecondModeCountTopFive)
+            //画昨日业务站点 Top5
+            // this.drawYesterDayAuthSecondYwzdCountTopFive(response.data.yesterDayAuthSecondYwzdCountTopFive)
+          })
+        }else {
+          ctidDataPacketTodayContrast(timeObj).then((response) => {
+            //认证一包 今天
+            this.todayAuthFirstCount = response.data.todayAuthFirstCount.count
+            //认证二包 今天
+            this.todayAuthSecondCount = response.data.todayAuthSecondCount.count
+            //开通一包 今天
+            this.todayKaitongFirstCount = response.data.todayKaitongFirstCount.count
+            //开通二包 今天
+            this.todayKaitongSecondCount = response.data.todayKaitongSecondCount.count
+            //开通固定包
+            this.todayKaitongGuDingCount = response.data.todayKaitongGuDingCount.count
+            //今日二维码 生码 一包
+            this.todayCreateCodeFirstCount = response.data.todayCreateCodeFirstCount.count
+            //今日二维码 验码 一包
+            this.todayCodeVerifyFirstCount = response.data.todayCodeVerifyFirstCount.count
+            //今日二维码 生码 二包
+            this.todayCreateCodeSecondCount = response.data.todayCreateCodeSecondCount.count
+            //今日二维码 验码 二包
+            this.todayCodeVerifySecondCount = response.data.todayCodeVerifySecondCount.count
+            // //画今天模式认证top5;
+            // this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+            // //画今天业务站点 Top5
+            // this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+            //画昨天模式认证top5;
+            // this.drawYesterDayAuthSecondModeCountTopFive(response.data.yesterDayAuthSecondModeCountTopFive)
+            //画昨日业务站点 Top5
+            // this.drawYesterDayAuthSecondYwzdCountTopFive(response.data.yesterDayAuthSecondYwzdCountTopFive)
+          })
+          selectctidDataPacketHistoryContrast(this.todayStart,this.todayEnd).then((response) => {
+            this.loading = false
+            this.drawTodayAuthSecondModeCountTopFive(response.data.todayAuthSecondModeCountTopFive)
+            this.drawTodayAuthSecondYwzdCountTopFive(response.data.todayAuthSecondYwzdCountTopFive)
+          })
+
+        }
+
+      },
+      getShowTime() {
+        //年月日;
+        var date = new Date()
+        this.yearMonthDay = {
+          year: date.getFullYear(),
+          month: check(date.getMonth() + 1),
+          day: check(date.getDate())
+        }
+        this.hourMinutes = {
+          hour: check(date.getHours()),
+          minutes: check(date.getMinutes()),
+          seconds: check(date.getSeconds())
+        }
+        this.widthasd = $('#nianyueri').offsetWidth
+        var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        var weekNum = weeks[date.getDay()]
+        this.weekNum = weekNum
+        if (check(date.getHours()) == '00' && check(date.getMinutes()) == '00') {
+          this.initData()
+        }
+      }
+    },
+    mounted() {
+      //定时任务以及 ,
+        this.datatimestartend()
+
+      this.initData()
+      timer_time = setInterval(() => {
+        setTimeout(this.dingshirenwu())
+      }, 60000)
+      this.getShowTime()
+      //时间显示;
+      timer_data = setInterval(() => {
+        setTimeout(this.getShowTime())
+      }, 2000)
+    },
+    destroyed() {
+      clearInterval(timer_time)
+      clearInterval(timer_data)
+    }
+  }
+</script>
+
+<style scoped>
+
+  .zhexiantu{
+    width: 100%;
+    height: 100%;
+    /*position: relative;*/
+    /*overflow: hidden;*/
+    /*background-color: palevioletred;*/
+    /*border-radius: 17px;*/
+  }
+  /*.zhexiantu:before{*/
+    /*content: '';*/
+    /*position: absolute;*/
+    /*top: 0;*/
+    /*left: 0;*/
+    /*bottom: 0;*/
+    /*right: 0;*/
+    /*filter: blur(20px);*/
+    /*z-index: -3;*/
+    /*margin: -30px;*/
+    /*background-color: palevioletred;*/
+  /*}*/
+  .bodyCss {
+    width: 1920px;
+    /*height: 100%;*/
+    height: 100vh;
+    background-color: #1e252f;
+  }
+  .right_data_color{
+    color: #F2F2BC!important;
+  }
+
+  /*头部 时间 + 标题*/
+  .header {
+    letter-spacing: 1px;
+    display: flex;
+    position: relative;
+    color: #E5E5E5;
+    height: 112px;
+    font-family: 'yuantixi'!important;
+    font-size: 22px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /*头部 时间*/
+  .header_time {
+    position: absolute;
+    left: 20px
+  }
+  /*头部 标题*/
+  .header_title {
+    font-size: 35px;
+    font-family: yuanticu!important;
+    font-weight: bold;
+  }
+
+  /*左边*/
+  .sideDiv_left{
+    margin-left:55px;
+  }
+  /*右边*/
+  .sideDiv_right{
+    margin-left: 41px;
+  }
+
+  .plate1 {
+    width: 364px;
+    position: relative;
+    height: 150px;
+    color: #E5E5E5;
+    border: 2px solid #e8feea;
+    border-radius: 15px;
+    margin-bottom: 40px;
+  }
+  /*板块*/
+  .plate {
+    width: 364px;
+    position: relative;
+    height: 200px;
+    color: #E5E5E5;
+    border: 2px solid #e8feea;
+    border-radius: 15px;
+    margin-bottom: 40px;
+  }
+  /*中间的大的*/
+  .plate_middle{
+    position: relative;
+    color: #E5E5E5;
+    border: 2px solid #E2945F;
+    border-radius: 17px;
+    margin-bottom: 40px;
+    width:485px;height:400px;
+  }
+  .plate_middle_title{
+    position: absolute;
+    font-family: yuanticu,microyahei!important;
+    /*font-weight: bold;*/
+    font-size: 26px;
+    height: 30px;
+    line-height: 30px;
+    color: #e5e5e5;
+    letter-spacing: 1px;
+    background-color: #1e252f;
+    padding: 0 4px;
+    width: 315px;
+    left: 85px;
+    text-align: center;
+    top: -15px;
+    /*z-index:99999;*/
+  }
+  /*板块的标题*/
+  .plate_title {
+    position: absolute;
+    font-family: yuanticu!important;
+    /*font-weight: bold;*/
+    font-size: 26px;
+    height: 30px;
+    line-height: 30px;
+    color: #e5e5e5;
+    letter-spacing: 1px;
+    background-color: #1e252f;
+    padding: 0 4px;
+    width: 200px;
+    left: 82px;
+    text-align: center;
+    top: -15px;
+  }
+  /*板块的内容*/
+  .plate_content {
+    padding-top: 43px;
+    padding-left: 45px;
+  }
+  .plate_content_middle{
+    width: 100%;
+    height: 100%;
+  }
+  /*板块的标题*/
+  .plate_content_title {
+    font-size: 30px;
+    font-weight: normal;
+    font-family: yuantixi!important
+  }
+  /*板块的数据*/
+  .plate_content_data {
+    font-size: 33px;
+    color: #EEB691;
+    font-family: yuantixi!important;
+    margin-left: 55px;
+  }
+  .ercode_data{
+    margin-left: 40px!important;
+  }
+  .ant-btn:hover{
+    color: black !important;
+  }
+
+
+</style>

src/views/topology/topology.vue

+<template >
+  <div >
+    <div v-if="flagTuxing">
+    <div style="height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border-bottom: #efefef solid 1px;color: #555555;font-size: 12px;position:absolute;z-index:999;right:0">
+      <div style="padding-top:10px;">
+        <a-button type="primary" @click="doAction6()">新建节点</a-button>
+        <a-button type="primary" @click="save()">保存</a-button>
+      </div>
+    </div>
+  <div >
+    <div ref="myPage" style="height:calc(100vh - 50px);" @click="isShowNodeMenuPanel = false">
+      <SeeksRelationGraph
+        ref="seeksRelationGraph"
+        :options="graphOptions"
+        :on-node-click="onNodeClick"
+        :on-line-click="onLineClick">
+        <div slot="node" slot-scope="{node}">
+          <div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;"  @click="showNodeMenus123(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)">
+            <!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
+            <img style="width:100%;height:auto;border-radius:50%" src="http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg" />
+          </div>
+          <div style="font-size: 16px;position: absolute;width: 160px;height:25px;line-height: 25px;margin-top:25px;margin-left:-48px;text-align: center;color:#444">
+            {{ node.text }}
+          </div>
+        </div>
+      </SeeksRelationGraph>
+    </div>
+       <div v-show="isShowNodeMenuPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
+      <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">对这个节点进行操作：</div>
+      <div class="c-node-menu-item" @click.stop="doAction00($event)">节点详情</div>
+      <div class="c-node-menu-item" @click.stop="doAction($event)">创建连接</div>
+      <div class="c-node-menu-item" @click.stop="doAction11($event)">删除连接</div>
+
+    </div>
+  </div>
+  </div>
+    <a-modal
+  title="连接"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :before-close="handleClose">
+  <a-row>
+    <a-row>
+      <!-- <el-autocomplete
+      v-model="state"
+      :fetch-suggestions="querySearchAsync"
+      style="float:left;margin-top:-20px"
+      placeholder="请输入内容"
+      @select="handleSelect"
+    ></el-autocomplete> -->
+    </a-row>
+    <div style="clear:both;padding-top:20px"></div>
+    <!-- <el-col :span='2'>节点：</el-col><el-col :span='5'>{{fromNode}}</el-col> -->
+    <a-col :span='5'>连接到：</a-col>
+    <a-col :span='15' >
+     <!-- <span style="padding-right:10px" v-for="(item,i) in alreadyIp">{{item}}</span> -->
+  <a-checkbox-group
+      @change="ipChanges"
+      :options="cities"
+      style="text-align:left"
+    v-model="checkedCities11">
+  </a-checkbox-group>
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink">确 定</a-button>
+  </span>
+</a-modal>
+
+    <a-modal
+  title="删除连接"
+  :visible.sync="dialogVisible111"
+  width="30%"
+  :before-close="handleClose">
+  <a-row>
+    <a-row>
+
+    </a-row>
+    <div style="clear:both;padding-top:20px"></div>
+    <a-col :span='15' >
+  <a-checkbox-group
+      @change="ipChanges111"
+      :options="cities1111"
+      style="text-align:left"
+    v-model="checkedCities111">
+  </a-checkbox-group>
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible111 = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink111">确 定</a-button>
+  </span>
+</a-modal>
+<a-modal
+  title="远程搜索"
+  :visible.sync="dialogVisible123"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk"
+  :before-close="handleClose">
+  <a-row>
+    <a-col :span='4' style="padding-top:5px;font-size:16px">节点IP：</a-col>
+    <a-col :span='20' >
+    <a-select
+    v-model="values"
+    show-search
+     mode="combobox"
+    :token-separators="[',']"
+    style="width:100%"
+    placeholder="请输入节点名称"
+    :options="cities123"
+   @search="handleSearch"
+    @change="handleChange"
+  ></a-select>
+    </a-col>
+  </a-row>
+  <a-row style="margin-top:10px">
+    <a-col :span='4' style="padding-top:5px;font-size:16px">应用名称：</a-col>
+    <a-col :span='20'>
+      <a-input v-model="yyname" placeholder="请输入应用名称" />
+    </a-col>
+  </a-row>
+  <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk ">取 消</a-button>
+    <a-button type="primary" @click="jiedianADD">确 定</a-button>
+  </span>
+</a-modal>
+
+<a-modal
+  title="详情"
+  :visible.sync="dialogVisible999"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk1"
+  :before-close="handleClose">
+        <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='8' style="text-align:right" >TCP连接无响应次数：</a-col>
+        <a-col :span='16'>
+
+          <span>{{connection_noresponse}}</span>
+        </a-col>
+      </a-row>
+        <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">TCP连接被重置次数：</a-col>
+    <a-col :span='16'>
+      <span>{{connection_rst}}</span>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">接收/发送流量(byte)：</a-col>
+    <a-col :span='16'>
+      <span>{{server_total_byte}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">数据传输比特率(bps)：</a-col>
+    <a-col :span='16'>
+      <span>{{total_byteps}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">TCP连接请求数量：</a-col>
+    <a-col :span='16'>
+      <span>{{request_num}}</span>
+    </a-col>
+  </a-row>
+    <a-row>
+    <a-col :span='24' style="text-align:right">
+      <a v-show="clickNodeFlag=='link'" @click="showNodeEcharts1()">查看历史状态</a>
+    </a-col>
+  </a-row>
+    <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk1 ">取 消</a-button>
+    <a-button type="primary" @click="cancelOk1">确 定</a-button>
+  </span>
+</a-modal>
+
+<a-modal
+  title="节点信息"
+  :visible.sync="dialogVisibleNode"
+  destroyOnClose
+  width="30%"
+  @cancel="cancelOk2"
+  :before-close="handleClose">
+      <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='8' style="text-align:right" >重传率(%)：</a-col>
+        <a-col :span='16'>
+          <span>{{total_packet_retrans_rate}}</span>
+        </a-col>
+      </a-row>
+        <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">总字节数(byte)：</a-col>
+    <a-col :span='16'>
+      <span>{{total_byte}}</span>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">活动会话数：</a-col>
+    <a-col :span='16'>
+      <span>{{alive_flow_count}}</span>
+    </a-col>
+  </a-row>
+    <a-row style="padding-top:5px;font-size:16px">
+  <a-col :span='8' style="text-align:right">三次握手平均时间(s)：</a-col>
+    <a-col :span='16'>
+      <span>{{tcp_three_handshake_avg_rtt}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">上行流量(byte)：</a-col>
+    <a-col :span='16'>
+      <span>{{uplink_packet}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">下行流量(byte)：</a-col>
+    <a-col :span='16'>
+      <span>{{downlink_packet}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">上行流量利用率：</a-col>
+    <a-col :span='16'>
+      <span>{{uplinkRate}}</span>
+    </a-col>
+  </a-row>
+  <a-row style="padding-top:5px;font-size:16px">
+    <a-col :span='8' style="text-align:right">下行流量利用率：</a-col>
+    <a-col :span='16'>
+      <span>{{downlinkRate}}</span>
+    </a-col>
+  </a-row>
+  <a-row>
+    <a-col :span='24' style="text-align:right">
+      <a v-show="clickNodeFlag=='node'" @click="showNodeEcharts()">查看历史状态</a>
+    </a-col>
+  </a-row>
+    <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk2 ">取 消</a-button>
+    <a-button type="primary" @click="cancelOk2">确 定</a-button>
+  </span>
+</a-modal>
+     <!--点击线-->
+      <a-row v-show="clickLineFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">客户端：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="serverIp" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">服务端：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="clientIp" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">时间：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                           @change="changeTime"/>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">类型：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+              <a-select-option v-for="type in typeList" :key="type.count">
+                {{ type.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="requstData_lineEcharts" type="primary">
+              提交
+            </a-button>
+          </a-form-model-item>
+        </a-form-model>
+        <a-button type="danger" style="position: absolute;right:30px;" @click="goback">返回</a-button>
+      </a-row>
+      <!--点击点-->
+      <a-row v-show="clickNodeEchartsFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+        <a-form-model style="margin:0 10px;" layout="inline">
+          <a-form-model-item>
+            <span style="color:white!important;">机器名称：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-input type="text" disabled v-model="needIds" style="color: grey"></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">时间：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                           @change="changeTime"/>
+          </a-form-model-item>
+          <a-form-model-item>
+            <span style="color:white!important;">类型：</span>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+              <a-select-option v-for="type in typeList" :key="type.count">
+                {{ type.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button @click="requestData_nodeEcharts" type="primary">提交</a-button>
+          </a-form-model-item>
+        </a-form-model>
+        <a-button type="danger" style="position: absolute;right:30px;" @click="goback ">返回</a-button>
+      </a-row>
+  <div>
+
+      <div v-show="clickLineFlag" >
+        <a-spin  :spinning="loading_gojs1" :indicator="indicator" >
+        <a-row type="flex" justify="space-around" style="background:rgb(7,8,54)">
+            <!--1-->
+                        <a-col :span="7" class="jyztchart">
+              <div class="title">连接请求无响应次数</div>
+              <div id="line_echarts_1" class="contentsasd"></div>
+            </a-col>
+            <!--2-->
+            <a-col :span="7" class="jyztchart">
+              <div class="title">连接请求被重置次数</div>
+              <div id="line_echarts_2" class="contentsasd"></div>
+            </a-col>
+            <!--3-->
+            <a-col :span="7" class="jyztchart">
+              <div class="title">每秒字节数</div>
+              <div id="line_echarts_3" class="contentsasd"></div>
+            </a-col>
+                        </a-row>
+          </a-spin>
+      </div>
+
+
+
+
+           <!--点击点-->
+           <div  v-show="clickNodeEchartsFlag">
+              <a-spin  :spinning="loading_gojs" :indicator="indicator" >
+                                    <a-row  type="flex" justify="space-around" style="background:rgb(7,8,54)">
+                                      <!--1-->
+                                      <a-col :span="7" class="nodechart">
+                                        <div class="title">重传率</div>
+                                        <div id="node_echarts_1" class="contentsasd"></div>
+                                      </a-col>
+                                      <!--2-->
+                                      <a-col :span="7" class="nodechart">
+                                        <div class="title">总字节数</div>
+                                        <div id="node_echarts_2" class="contentsasd"></div>
+                                      </a-col>
+                                      <!--3-->
+                                      <a-col :span="7" class="nodechart">
+                                        <div class="title">活动会话数</div>
+                                        <div id="node_echarts_3" class="contentsasd"></div>
+                                      </a-col>
+                                    </a-row>
+                <a-row  type="flex" justify="space-around" style="background:rgb(7,8,54)">
+                  <!--4-->
+                  <a-col :span="7" class="nodechart" >
+                    <div class="title">三次握手平均时间 </div>
+                    <div id="node_echarts_4" class="contentsasd"></div>
+                  </a-col>
+                  <!--5-->
+                  <a-col :span="7" class="nodechart">
+                    <div class="title">上行流量趋势(byte)</div>
+                    <div id="node_echarts_5" class="contentsasd"></div>
+                  </a-col>
+                  <!--6-->
+                  <a-col :span="7" class="nodechart" >
+                    <div class="title">下行流量趋势(byte) </div>
+                    <div id="node_echarts_6" class="contentsasd"></div>
+                  </a-col>
+                </a-row>
+                          </a-spin>
+           </div>
+
+  </div>
+
+
+  </div>
+</template>
+<script>
+ const cityOptions = ['192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101'];
+import {tuoPuTuErCode
+        ,selectNodeAndLinkList
+        ,saveNodes,
+        selectNodeListByDisconnet,
+        insertLink,
+        selectNodeListByConnect,
+        deleteLink,
+        findIpAndPortByKeyword,
+        checkIpUniq,
+        selectNodeInfo,
+        selectLinkInfo,
+        clickNodeSelectEcharts_renzheng,
+        clickLineSelectEcharts_renzheng
+      } from "@/api/user"
+      import { formatDate } from '@/utils/time.js'
+import SeeksRelationGraph from 'relation-graph'
+import node from '@babel/register/lib/node';
+import $ from 'jquery'
+export default {
+  name: 'SeeksRelationGraphDemo',
+  components: { SeeksRelationGraph },
+  data() {
+    return {
+      indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+      loading_gojs: true,
+     clickNodeEchartsFlag: false,//点击的是线还是点判断标志
+     selectNodeData: '',//点击节点的时候所带的数据
+     selectTime: '',// 时间选择器的值；
+      selectTimeType: 'minute',// 时间选择器后面的那个类型;默认是分
+              typeList: [{ 'count': 'minute', 'name': '分' }, { 'count': 'tenMinutes', 'name': '10分' }, {
+          'count': 'hour',
+          'name': '小时'
+        }, { 'count': 'day', 'name': '天' }],
+        dateFormat: 'YYYY/MM/DD',
+        wangzhenglianluSelect: false,//网证链路
+        showEcharts: false,
+        loading_echarts: false,
+        clickLineFlag:false,
+        loading_gojs1:true,
+        renzhenglianluSelect: true,//认证链路
+      clickNodeFlag:'',
+      flagTuxing:true,
+      connection_noresponse:null,
+      connection_rst:null,
+      server_total_byte:null,
+      total_byteps:null,
+      request_num:null,
+      serverIp:'',
+      clientIp:'',
+      total_packet_retrans_rate:null,
+      tcp_three_handshake_avg_rtt:null,
+      uplink_packet:null,
+      downlink_packet:null,
+      uplinkRate:0,
+      downlinkRate:0,
+      alive_flow_count:null,
+      total_byte:null,
+      yyname:'',
+      values:'',
+      cities1111:[],
+      checkedCities111:[],
+      dialogVisible111:false,
+      dialogVisibleNode:false,
+      dialogVisible999:false,
+      nodeMenuPanelPosition: { x: 0, y: 0 },
+      isShowNodeMenuPanel:false,
+      isShowCodePanel: false,
+      checkedCities: [],
+      isShowNodeTipsPanel:false,
+      checkedCities11:[],
+      cities: [],
+      addd:{
+        nodes:[],
+        links:[]
+      },
+      firstNode:'',
+      secondNode:'',
+      needIds:'',
+      deleteLink:[],
+      nodeArray:[],
+      dialogVisible:false,
+      dialogVisible123:false,
+      selectLineData:'',
+      fromNode:'',
+      linkList:[],
+      ips:'',
+      alreadyIp:[],
+      jiedianValue:'',
+      fromIpNow:'',
+      jiedianNum:0,
+      cities123:[],
+      savalink:[],
+        savalinkdelete:[],
+      finshLink:[],
+      g_loading: true,
+      demoname: '---',
+      checked_sex: '',
+      checked_isgoodman: '',
+      // rel_checkList: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
+      // all_rel_type: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
+      graphOptions: {
+        defaultNodeBorderWidth: 0,
+        defaultNodeColor: 'rgba(238, 178, 94, 1)',
+        allowSwitchLineShape: true,
+        allowSwitchJunctionPoint: true,
+        defaultLineShape: 1,
+        'layouts': [
+          {
+            'label': '中心布局',
+            'layoutName': 'center',
+            'layoutClassName': 'seeks-layout-force',
+          }
+        ],
+        defaultJunctionPoint: 'border',
+       "defaultLineWidth": 2,
+      "defaultNodeBorderWidth": 1,
+
+         "disableZoom": true
+        // 这里可以参考"Graph 图谱"中的参数进行设置
+      }
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+          this.initGuanXi()
+        //   this.cities123 = []
+        //  tuoPuTuErCode().then((response) => {
+        //    for(var i=0;i<response.data.length;i++){
+        //      let obj={}
+        //      obj['value'] = response.data[i]
+        //      obj['label'] = response.data[i]
+        //      this.cities123.push(obj)
+        //    }
+        //   })
+    this.demoname = this.$route.params.demoname
+          selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+
+  },
+  methods: {
+    goback(){
+      this.clickNodeEchartsFlag = false
+      this.flagTuxing = true
+      this.loading_gojs = true
+
+                selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+    },
+    goback1(){
+      this.clickLineFlag = false
+      this.flagTuxing = true
+      this.loading_gojs1 = true
+
+                selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+            console.log(this.addd)
+            for(var i=0;i<this.addd.nodes.length;i++){
+              this.addd.nodes[i].text = this.addd.nodes[i].text+this.addd.nodes[i].appName
+            }
+               this.setGraphData()
+          })
+    },
+          //时间变化;
+      changeTime(date, dateString) {
+        this.selectTime = dateString
+      },
+          changeTimeType(e) {
+        this.selectTimeType = e
+      },
+    //点击查看图形
+        showNodeEcharts() {
+        this.dialogVisibleNode = false
+        this.selectTimeType = 'minute'
+        this.selectTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        this.requestData_nodeEcharts()
+      },
+      showNodeEcharts1(){
+        this.dialogVisible999 = false
+        this.selectTimeType = 'minute'
+        this.selectTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        this.requstData_lineEcharts()
+      },
+      requestData_nodeEcharts() {
+          this.loading_gojs = true
+        this.flagTuxing = false
+        this.loading_echarts = true
+        this.clickNodeEchartsFlag = true
+        this.clickLineFlag = false
+        this.showEcharts = true
+        var obj = {
+          serverIpName: this.needIds,
+          startTime: this.selectTime,
+          type: this.selectTimeType
+        }
+         clickNodeSelectEcharts_renzheng(obj).then((response) => {
+            this.loading_gojs = false
+            this.loading_echarts = false
+            this.showEcharts = true
+            //重传率
+            this.drawLineEcharts('node_echarts_1', response.data.total_packet_retrans_rate, response.data.totalPacketRetransRate, response.data.totalPacketRetransRateMaximum,'重传率','nobyteData')
+            //总字节数
+            this.drawLineEcharts('node_echarts_2', response.data.total_byte, response.data.totalByte, response.data.totalByteMaximum,'总字节数','byteData')
+            //活动会话数
+            this.drawLineEcharts('node_echarts_3', response.data.alive_flow_count, response.data.aliveFlowCount, response.data.aliveFlowCountMaximum,'活动会话数','nobyteData')
+            //三次握手
+            this.drawLineEcharts('node_echarts_4', response.data.tcp_three_handshake_avg_rtt, response.data.tcpThreeHandShakeAvgRtt, response.data.tcpThreeHandshakeAvgRttMaximum,'三次握手','nobyteData')
+           //上行流量趋势
+           this.drawLineEcharts('node_echarts_5',response.data.uplink_packet, response.data.upLink, 0,'上行流量趋势','nobyteData')
+           //下行流量趋势
+           this.drawLineEcharts('node_echarts_6', response.data.downlink_packet, response.data.downLink, 0,'下行流量趋势','nobyteData')
+          })
+      },
+
+            //线图请求;
+      requstData_lineEcharts() {
+        this.loading_gojs1 = true
+        this.flagTuxing = false
+        this.loading_echarts = true
+        this.clickLineFlag = true
+        this.clickNodeEchartsFlag = false
+        this.showEcharts = true
+        var obj = {
+          serverIpName: this.serverIp,
+          clientIpName: this.clientIp,
+          startTime: this.selectTime,
+          type: this.selectTimeType
+        }
+          clickLineSelectEcharts_renzheng(obj).then((response) => {
+            this.loading_gojs1 = false
+            this.loading_echarts = false
+            this.lineEchartsData = response.data
+            // 画图echarts;
+            this.drawLineEcharts('line_echarts_1', response.data.connection_noresponse, response.data.fittedCurveConnectionNoResponse, response.data.connectionNoresponseMaximum,'连接请求无响应次数','nobyteData')//连接请求无响应次数
+            this.drawLineEcharts('line_echarts_2', response.data.connection_rst, response.data.fittedCurveConnectionRst, response.data.connectionRstListMaximum,'连接请求被重置次数','nobyteData')//连接请求被重置次数
+            this.drawLineEcharts('line_echarts_3', response.data.total_byteps, response.data.fittedCurveTotalBytes, response.data.totalBytepsListMaximum,'每秒字节数','byteData')//每秒字节数
+          })
+
+      },
+          cancelOk(){
+            this.values = ''
+            this.yyname = ''
+        this.dialogVisible123 = false
+      },
+      cancelOk1(){
+        this.dialogVisible999 = false
+      },
+      cancelOk2(){
+        this.dialogVisibleNode = false
+      },
+    handleChange(val){
+      this.jiedianValue = val
+
+    },
+
+    drawLineEcharts(id, data, filter_data, gaojingdata, title,yAxistype) {
+        // 连接请求无响应次数
+        let myChart = this.$echarts.init(document.getElementById(id))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontFamily: 'Times New Roman'
+              },
+              formatter(value) {
+                if(yAxistype=='byteData'){
+                  var temp = parseInt(value)
+                  if(temp/1024<1){
+                    return temp + 'B'
+                  }else if((temp/1024)>1 && (temp/1024/1024)<1){
+                    return parseInt(temp/1024) + 'KB'
+                  }else{
+                    return parseInt(temp/1024/1024) +'M'
+                  }
+                }else{
+                  return value
+                }
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: title,
+              data: data,
+              type: 'line',
+              axisLabel:{
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine : {   //添加警戒线
+                symbol:"none",//去掉警戒线最后面的箭头
+                // name:"警戒线",
+                silent:true,
+                label:{
+                  show: false,
+                  position:"start",//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  formatter() {
+                    var temp = parseInt(gaojingdata)
+                    if(temp/1024<1){
+                      return gaojingdata + 'B'
+                    }else if((temp/1024)>1 && (temp/1024/1024)<1){
+                      return parseInt(temp/1024) + 'KB'
+                    }else{
+                      return parseInt(temp/1024/1024) +'M'
+                    }
+                  },
+                  color:"red",
+                  fontSize:14
+                },
+                data : [{
+                  silent:true,//鼠标悬停事件  true没有，false有
+                  lineStyle:{//警戒线的样式  ，虚实  颜色
+                    type:"dashed",
+                    color:"red"
+                  },
+                  name: '警戒线',
+                  yAxis: gaojingdata
+                }]
+              },
+              // symbol: 'none'  //取消折点圆圈
+            }, {
+              name: '拟合曲线',
+              data: filter_data,
+              type: 'line',
+              // symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+    handleSearch(val){
+    if(val.length>3){
+        this.cities123=[]
+        findIpAndPortByKeyword(val).then((response) => {
+                 for(var i=0;i<response.data.length;i++){
+                    let obj={}
+                    obj['value'] = response.data[i]
+                    obj['label'] = response.data[i]
+                    this.cities123.push(obj)
+                  }
+            })
+ }
+      //  this.jiedianValue =this.values
+    },
+    needIp(){
+             selectNodeListByDisconnet(this.needIds).then((response) => {
+                this.cities = response.data
+            })
+    },
+    querySearchAsync(){},
+    btnLink(){
+    this.finshLink= []
+    console.log(this.needIds)
+    for(var i=0;i<this.savalink.length;i++){
+        let obj={}
+        obj['fromIp']=this.needIds
+        obj['toIp'] = this.savalink[i]
+        this.finshLink.push(obj)
+    }
+    insertLink(this.finshLink).then((response) => {
+                location.reload()
+            })
+
+    this.dialogVisible = false
+
+
+    },
+    btnLink111(){
+          this.deleteLink= []
+    console.log(this.needIds)
+    for(var i=0;i<this.savalinkdelete.length;i++){
+        let obj={}
+        obj['fromIp']=this.needIds
+        obj['toIp'] = this.savalinkdelete[i]
+        this.deleteLink.push(obj)
+    }
+    deleteLink(this.deleteLink).then((response) => {
+                location.reload()
+            })
+      this.dialogVisible111 = false
+    },
+    ipChanges(val){
+      this.savalink=val
+       console.log(this.savalink)
+      // this.linkList = val
+    },
+    ipChanges111(val){
+        this.savalinkdelete = val
+    },
+    jiedianADD(){
+      var ipAndPort = this.values.split(":")
+        var pattern =/^([1-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+        var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+        var reg = ipAndPort[0].match(exp);
+        if(pattern.test(ipAndPort[1]) && reg!=null && this.yyname !=''){
+            checkIpUniq(this.values).then((response) => {
+                if(response.data.data){
+                        console.log(this.jiedianValue,this.values,"g")
+                    this.dialogVisible123 = false
+                    var graph = this.$refs.seeksRelationGraph
+                    var __graph_json_data ={
+                      nodes:[
+                      {'id':this.jiedianValue,'fixed':true,'x':50,'y':50 ,'appName':this.yyname,'text': this.jiedianValue+this.yyname, 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff','borderWidth': 3, 'innerHTML': '<div class="c-my-node2" style="background-image: url(http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg);"><div class="c-node-name2" style="color:#6cc0ff">'+this.jiedianValue+'</div></div>' }
+                    ],
+                    links:[
+                    ]
+                    }
+                    this.addd.nodes.push(__graph_json_data.nodes[0])
+
+                    graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
+                      // 这些写上当图谱初始化完成后需要执行的代码
+                    })
+                }else{
+                  this.$message.error(response.data.msg)
+                }
+             })
+
+        }else{
+          this.$message.error('请输入正确的ip端口与应用名称')
+        }
+
+
+
+
+
+    },
+    // jiedianChange(val){
+    //   this.jiedianNum++
+    //    this.jiedianValue = val
+    // },
+    handleClose(){},
+    initGuanXi(){
+          selectNodeAndLinkList().then((response) => {
+            this.addd = response.data
+          })
+    },
+    save(){
+      // console.log(this.addd)
+          saveNodes(this.addd).then((response) => {
+            if(response.data.code === 200){
+              this.$message.success(response.data.msg)
+            }
+          })
+    },
+    setGraphData() {
+//       var __graph_json_data = { 'rootId': 'N13',
+//        'nodes':
+//        [{ 'id': 'N1','fixed':true,'x':200,'y':200, 'text': '侯亮平', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014);"><div class="c-node-name2" style="color:#ff875e">侯亮平</div></div>' },
+//         { 'id': 'N2', 'fixed':true,'x':400,'y':400, 'text': '李达康', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062);"><div class="c-node-name2" style="color:#ff875e">李达康</div></div>' },
+//         { 'id': 'N3','fixed':true,'x':600,'y':200,  'text': '祁同伟', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'borderWidth': 3, 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092);"><div class="c-node-name2" style="color:#6cc0ff">祁同伟</div></div>' },
+//        ],
+//      'links': [{ 'from': 'N2', 'to': 'N1', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N2', 'to': 'N3', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N1', 'to': 'N3', 'text': '上下级', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '上下级' }},
+//           ]}
+      this.$refs.seeksRelationGraph.setJsonData(this.addd, (seeksRGGraph) => {
+        // 这些写上当图谱初始化完成后需要执行的代码
+        setTimeout(() => {
+          seeksRGGraph.graphSetting.layouter.stop()
+        }, 1000)
+      })
+    },
+    // onNodeClick(nodeObject, $event) {
+    //   this.nodeArray.push(nodeObject.text)
+    //   this.firstNode =  this.nodeArray[0]
+    //   this.secondNode = this.nodeArray[1]
+    //   //排除自己连自己
+    //   if(this.nodeArray.length>=2){
+    //   if(this.firstNode !== this.secondNode){
+    //      var obj={'from': this.firstNode, 'to':this.secondNode,'text':'链路', 'color': '#d2c0a5', 'fontColor': '#d2c0a5',}
+    //       this.addd.links.push(obj)
+    //       this.save()
+    //       this.$forceUpdate()
+    //       location.reload();
+    //   }
+    //   this.nodeArray=[]
+    //   }
+
+    //   console.log('onNodeClick:', nodeObject)
+    //   this.fromNode = nodeObject.text
+    //   //========================
+    //   this.fromIpNow = nodeObject.text
+    // },
+
+        onNodeClick(nodeObject, $event) {
+      console.log('onNodeClick:', nodeObject)
+
+    },
+    onLineClick(lineObject, $event) {
+            // console.log('onLineClick:', lineObject.fromNode.id,lineObject.toNode.id)
+            this.serverIp = lineObject.fromNode.id
+            this.clientIp = lineObject.toNode.id
+            selectLinkInfo(lineObject.fromNode.id,lineObject.toNode.id).then((response) => {
+            console.log(response)
+            this.connection_noresponse = response.data.connection_noresponse
+            this.connection_rst = response.data.connection_rst
+            this.total_byteps = response.data.total_byteps
+              this.server_total_byte = response.data.server_total_byte
+              this.request_num = response.data.request_num
+
+            })
+          this.clickNodeFlag = 'link'
+      this.dialogVisible999 = true
+
+    },
+   showNodeMenus123(nodeObject, $event) {
+
+      this.currentNode = nodeObject
+      var _base_position = this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus:', nodeObject,$event)
+      //通过id把x y 配置到json
+      for(var j=0;j<this.addd.nodes.length;j++){
+        if(nodeObject.id == this.addd.nodes[j].id){
+          this.addd.nodes[j].x = $event.x
+          this.addd.nodes[j].y = $event.y
+        }
+      }
+      // this.isShowNodeMenuPanel = true
+      // this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+      // this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+    },
+    showNodeMenus(nodeObject, $event) {
+      this.needIds = nodeObject.id
+      this.currentNode = nodeObject
+      var _base_position = this.$refs.myPage.getBoundingClientRect()
+      console.log('showNodeMenus1:',nodeObject,$event)
+      this.isShowNodeMenuPanel = true
+      this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+      this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+
+      //传id调取可连接的点的list
+
+    },
+    doAction(nodeobj) {
+      console.log(nodeobj)
+      this.needIp()
+      this.dialogVisible = true
+      this.isShowNodeMenuPanel = false
+    },
+    doAction00(val){
+      selectNodeInfo(this.needIds).then((response) => {
+            this.total_packet_retrans_rate = response.data.total_packet_retrans_rate
+            this.total_byte = response.data.total_byte
+            this.alive_flow_count = response.data.alive_flow_count
+            this.tcp_three_handshake_avg_rtt = response.data.tcp_three_handshake_avg_rtt
+            this.uplink_packet = response.data.uplink_packet
+            this.downlink_packet = response.data.downlink_packet
+            var a = response.data.uplink_packet
+            var b = response.data.total_byte
+            var c = a/b
+            var d = c.toFixed(2)
+            if(a>0){
+              this.uplinkRate = d
+              this.downlinkRate = 1-d
+              this.downlinkRate = this.downlinkRate.toFixed(2)
+            }else {
+              this.uplinkRate = 0
+              this.downlinkRate = 0
+            }
+
+          })
+           this.clickNodeFlag = 'node'
+       this.dialogVisibleNode = true
+      this.isShowNodeMenuPanel = false
+
+    },
+    doAction11(val){
+      selectNodeListByConnect(this.needIds).then((response) => {
+            this.cities1111 = response.data
+          })
+      this.dialogVisible111 = true
+      this.isShowNodeMenuPanel = false
+    },
+    doAction1() {
+
+      var graph = this.$refs.seeksRelationGraph
+      graph.focusNodeById('N3')
+      graph.getNodeById('N3').borderColor = '#000000'
+      graph.getNodeById('N3').fontColor = '#000000'
+    },
+    doAction2() {
+      var graph = this.$refs.seeksRelationGraph
+      graph.getNodeById('N6').opacity = 0.3
+    },
+    doAction3(targetNodeId) {
+      var graph = this.$refs.seeksRelationGraph
+      var _node_8 = graph.getNodeById('N8')
+      var _target_node = graph.getNodeById(targetNodeId)
+      // 直接改变位置
+      // _node_8.x = _node_3.x - 100
+      // _node_8.y = _node_3.y
+      // 通过动画改变位置
+      animateTo(_node_8, _target_node.x - 50, _target_node.y)
+    },
+    doAction5() {
+      var graph = this.$refs.seeksRelationGraph
+      var _node_8 = graph.getNodeById('N8')
+      _node_8.width = 200
+      _node_8.height = 200
+    },
+    doAction6() {
+      this.dialogVisible123 = true
+
+    }
+  }
+}
+function animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y) {
+  if (buff_x === undefined) {
+    window.$tmp_x = x
+    window.$tmp_y = y
+    buff_x = node.x - x
+    buff_y = node.y - y
+    direction_x = buff_x < 0 ? -1 : 1
+    direction_y = buff_y < 0 ? -1 : 1
+  }
+  var _speed_x = Math.abs(node.x - x) / 20
+  var _speed_y = Math.abs(node.y - y) / 20
+  if (_speed_x < 4) _speed_x = 4
+  if (_speed_y < 4) _speed_y = 4
+  console.log('animateTo', _speed_x, _speed_y)
+  var _stop = true
+  if (direction_x === -1) {
+    if (node.x < window.$tmp_x) {
+      node.x += _speed_x
+      _stop = false
+    }
+  } else {
+    if (node.x > window.$tmp_x) {
+      node.x -= _speed_x
+      _stop = false
+    }
+  }
+  if (direction_y === -1) {
+    if (node.y < window.$tmp_y) {
+      node.y += _speed_y
+      _stop = false
+    }
+  } else {
+    if (node.y > window.$tmp_y) {
+      node.y -= _speed_y
+      _stop = false
+    }
+  }
+  if (!_stop) setTimeout(() => { animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y) }, 50)
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+  .c-my-node2{
+    border:none;
+    background-position: center center;
+    background-size: 100%;
+    height:74px;
+    width:74px;
+    border-radius: 40px;
+  }
+  .c-node-name2{
+    width:160px;margin-left:-40px;text-align:center;margin-top:85px;
+    position: absolute;
+  }
+  .c-node-menu-item{
+  line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px;
+}
+.c-node-menu-item:hover{
+  background-color: rgba(66,187,66,0.2);
+}
+  * {
+    font-family: 'Microsoft YaHei' !important;
+  }
+
+  .content {
+    width: 98%;
+    margin: 20px 1%;
+    height: 700px;
+  }
+
+  /*交易状态折线图的Yangshi*/
+  .jyztchart {
+    height: 800px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+    margin-top: 20px;
+  }
+  .nodechart {
+    height: 400px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+    margin-top: 20px;
+  }
+  .jyztchart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .jyztchart .contentsasd {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+  .nodechart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .nodechart .contentsasd {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+</style>

src/views/topology2/topology2.vue

+<template>
+  <div>
+    <div v-if="flagTuxing">
+      <div>
+        <div ref="myPage" style="height:calc(100vh - 50px);" @click="isShowNodeMenuPanel = false">
+          <SeeksRelationGraph
+            ref="seeksRelationGraph"
+            :options="graphOptions"
+            :on-node-click="onNodeClick"
+            :on-line-click="onLineClick">
+            <div slot="node" slot-scope="{node}">
+              <div style="height:64px;line-height: 64px;border-radius: 32px;cursor: pointer;"
+                   @click="showNodeMenus123(node, $event)" @contextmenu.prevent.stop="showNodeMenus(node, $event)">
+                <!-- <i style="font-size: 30px;" :class="node.data.myicon" /> -->
+                <img style="width:100%;height:auto;border-radius:50%"
+                     src="http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg"/>
+              </div>
+              <div
+                style="font-size: 16px;position: absolute;width: 160px;height:25px;line-height: 25px;margin-top:25px;margin-left:-48px;text-align: center;color:#444">
+                {{ node.text }}
+              </div>
+            </div>
+          </SeeksRelationGraph>
+        </div>
+        <div v-show="isShowNodeMenuPanel"
+             :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }"
+             style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;">
+          <div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;"></div>
+          <div class="c-node-menu-item" @click.stop="doAction00($event)">业务详情</div>
+          <!-- <div class="c-node-menu-item" @click.stop="doAction($event)">创建连接</div>
+          <div class="c-node-menu-item" @click.stop="doAction11($event)">删除连接</div> -->
+
+        </div>
+      </div>
+    </div>
+    <a-modal
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose">
+      <a-row>
+        <a-row>
+          <!-- <el-autocomplete
+          v-model="state"
+          :fetch-suggestions="querySearchAsync"
+          style="float:left;margin-top:-20px"
+          placeholder="请输入内容"
+          @select="handleSelect"
+        ></el-autocomplete> -->
+        </a-row>
+        <div style="clear:both;padding-top:20px"></div>
+        <!-- <el-col :span='2'>节点：</el-col><el-col :span='5'>{{fromNode}}</el-col> -->
+        <a-col :span='5'>连接到：</a-col>
+        <a-col :span='15'>
+          <!-- <span style="padding-right:10px" v-for="(item,i) in alreadyIp">{{item}}</span> -->
+          <a-checkbox-group
+            @change="ipChanges"
+            :options="cities"
+            style="text-align:left"
+            v-model="checkedCities11">
+          </a-checkbox-group>
+        </a-col>
+      </a-row>
+      <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink">确 定</a-button>
+  </span>
+    </a-modal>
+
+    <a-modal
+      title="删除连接"
+      :visible.sync="dialogVisible111"
+      width="30%"
+      :before-close="handleClose">
+      <a-row>
+        <a-row>
+
+        </a-row>
+        <div style="clear:both;padding-top:20px"></div>
+        <a-col :span='15'>
+          <a-checkbox-group
+            @change="ipChanges111"
+            :options="cities1111"
+            style="text-align:left"
+            v-model="checkedCities111">
+          </a-checkbox-group>
+        </a-col>
+      </a-row>
+      <span slot="footer" class="dialog-footer">
+    <a-button @click="dialogVisible111 = false">取 消</a-button>
+    <a-button type="primary" @click="btnLink111">确 定</a-button>
+  </span>
+    </a-modal>
+    <a-modal
+      title="远程搜索"
+      :visible.sync="dialogVisible123"
+      destroyOnClose
+      width="30%"
+      @cancel="cancelOk"
+      :before-close="handleClose">
+      <a-row>
+        <a-col :span='4' style="padding-top:5px;font-size:16px">节点IP：</a-col>
+        <a-col :span='20'>
+          <a-select
+            v-model="values"
+            show-search
+            mode="combobox"
+            :token-separators="[',']"
+            style="width:100%"
+            placeholder="请输入节点名称"
+            :options="cities123"
+            @search="handleSearch"
+            @change="handleChange"
+          ></a-select>
+        </a-col>
+      </a-row>
+      <a-row style="margin-top:10px">
+        <a-col :span='4' style="padding-top:5px;font-size:16px">应用名称：</a-col>
+        <a-col :span='20'>
+          <a-input v-model="yyname" placeholder="请输入应用名称"/>
+        </a-col>
+      </a-row>
+      <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk ">取 消</a-button>
+    <a-button type="primary" @click="jiedianADD">确 定</a-button>
+  </span>
+    </a-modal>
+
+    <!-- <a-modal
+      title="详情"
+      :visible.sync="dialogVisible999"
+      destroyOnClose
+      width="30%"
+      @cancel="cancelOk1"
+      :before-close="handleClose">
+            <a-row style="padding-top:5px;font-size:16px">
+          <a-col :span='8' style="text-align:right" >连接请求无响应次数：</a-col>
+            <a-col :span='16'>
+
+              <span>{{connection_noresponse}}</span>
+            </a-col>
+          </a-row>
+            <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='8' style="text-align:right">连接请求被重置次数：</a-col>
+        <a-col :span='16'>
+          <span>{{connection_rst}}</span>
+        </a-col>
+      </a-row>
+        <a-row style="padding-top:5px;font-size:16px">
+      <a-col :span='8' style="text-align:right">每秒字节数：</a-col>
+        <a-col :span='16'>
+          <span>{{total_byteps}}</span>
+        </a-col>
+      </a-row>
+        <a-row>
+        <a-col :span='24' style="text-align:right">
+          <a v-show="clickNodeFlag=='link'" @click="showNodeEcharts1()">查看历史状态</a>
+        </a-col>
+      </a-row>
+        <span slot="footer" class="dialog-footer">
+        <a-button @click="cancelOk1 ">取 消</a-button>
+        <a-button type="primary" @click="cancelOk1">确 定</a-button>
+      </span>
+    </a-modal> -->
+
+    <a-modal
+      title="IP节点状态"
+      :visible.sync="dialogVisibleNode"
+      destroyOnClose
+      width="30%"
+      @cancel="cancelOk2"
+      :before-close="handleClose">
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">请求传输时间(s)：</a-col>
+        <a-col :span='17'>
+          <span>{{request_transport_time}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">响应传输时间(s)：</a-col>
+        <a-col :span='17'>
+          <span>{{response_transport_time}}</span>
+
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">交易处理时间(s)：</a-col>
+        <a-col :span='17'>
+          <span>{{trans_handle_time}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">响应时间(s)：</a-col>
+        <a-col :span='17'>
+          <span>{{response_rtt}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">认证量：</a-col>
+        <a-col :span='17'>
+          <span>{{trading_volume}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">交易成功次数：</a-col>
+        <a-col :span='17'>
+          <span>{{success_num}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">交易失败次数：</a-col>
+        <a-col :span='17'>
+          <span>{{fail_num}}</span>
+        </a-col>
+      </a-row>
+      <a-row style="padding-top:5px;font-size:16px">
+        <a-col :span='7' style="text-align:right">交易成功率：</a-col>
+        <a-col :span='17'>
+          <span>{{success_rate}}</span>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='24' style="text-align:right">
+          <a v-show="clickNodeFlag=='node'" @click="showNodeEcharts()">查看历史状态</a>
+        </a-col>
+      </a-row>
+      <span slot="footer" class="dialog-footer">
+    <a-button @click="cancelOk2 ">取 消</a-button>
+    <a-button type="primary" @click="cancelOk2">确 定</a-button>
+  </span>
+    </a-modal>
+    <!--点击线-->
+    <a-row v-show="clickLineFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+      <a-form-model style="margin:0 10px;" layout="inline">
+        <a-form-model-item>
+          <span style="color:white!important;">客户端：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-input type="text" disabled v-model="serverIp" style="color: grey"></a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <span style="color:white!important;">服务端：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-input type="text" disabled v-model="clientIp" style="color: grey"></a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <span style="color:white!important;">时间：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                         @change="changeTime"/>
+        </a-form-model-item>
+        <a-form-model-item>
+          <span style="color:white!important;">类型：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+            <a-select-option v-for="type in typeList" :key="type.count">
+              {{ type.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button @click="requstData_lineEcharts" type="primary">
+            提交
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+      <a-button type="danger" style="position: absolute;right:30px;" @click="goback">返回</a-button>
+    </a-row>
+    <!--点击点-->
+    <a-row v-show="clickNodeEchartsFlag" class="inputDivCss" style="background:rgb(7,8,54)">
+      <a-form-model style="margin:0 10px;" layout="inline">
+        <a-form-model-item>
+          <span style="color:white!important;">机器名称：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-input type="text" disabled v-model="needIds" style="color: grey"></a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <span style="color:white!important;">时间：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-date-picker show-time placeholder="选择时间" format="YYYY-MM-DD HH:mm" v-model="selectTime"
+                         @change="changeTime"/>
+        </a-form-model-item>
+        <a-form-model-item>
+          <span style="color:white!important;">类型：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-select v-model="selectTimeType" placeholder="请选择类型" style="width: 200px" @change="changeTimeType">
+            <a-select-option v-for="type in typeList" :key="type.count">
+              {{ type.name }}
+            </a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button @click="requestData_nodeEcharts" type="primary">提交</a-button>
+        </a-form-model-item>
+      </a-form-model>
+      <a-button type="danger" style="position: absolute;right:30px;" @click="goback ">返回</a-button>
+    </a-row>
+    <div>
+      <!--点击点-->
+      <div v-show="clickNodeEchartsFlag">
+        <a-row type="flex" justify="space-around" style="padding-top: 20px">
+          <a-col :span="7" class="authIpchart">
+            <div class="title">并发量</div>
+            <div class="content" id="bingfaliangid"></div>
+          </a-col>
+          <a-col :span="7" class="authIpchart">
+            <div class="title">交易处理量统计</div>
+            <div class="content" id="jiaoyichuliliangCountId"></div>
+          </a-col>
+          <a-col :span="7" class="authIpchart">
+            <div class="title">请求传输时间</div>
+            <div class="content" id="requestattrtimeid"></div>
+          </a-col>
+        </a-row>
+        <a-row type="flex" justify="space-around" style="padding-top:10px;">
+          <a-col :span="7" class="authIpchart">
+            <div class="title">响应时间</div>
+            <div class="content" id="responseTimeId"></div>
+          </a-col>
+          <a-col :span="7" class="authIpchart">
+            <div class="title">响应传输时间</div>
+            <div class="content" id="responseAttrTimeId"></div>
+          </a-col>
+          <a-col :span="7" class="authIpchart">
+            <div class="title">交易处理时间</div>
+            <div class="content" id="jiaoyichuliTimeId"></div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+<script>
+  const cityOptions = ['192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101', '192.168.10.101']
+  import {
+     selectNodeAndLinkList
+    , saveNodes,
+    selectNodeListByDisconnet,
+    insertLink,
+    selectNodeListByConnect,
+    deleteLink,
+    findIpAndPortByKeyword,
+    checkIpUniq,
+    selectAuthIp,
+    selectLinkInfo,
+    clickNodeSelectEcharts_renzhengIp} from '@/api/user'
+  import { formatDate } from '@/utils/time.js'
+  import SeeksRelationGraph from 'relation-graph'
+  import node from '@babel/register/lib/node'
+  import $ from 'jquery'
+
+  export default {
+    name: 'SeeksRelationGraphDemo',
+    components: { SeeksRelationGraph },
+    data() {
+      return {
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        loading_gojs: false,
+        clickNodeEchartsFlag: false,//点击的是线还是点判断标志
+        selectNodeData: '',//点击节点的时候所带的数据
+        selectTime: '',// 时间选择器的值；
+        selectTimeType: 'today',// 时间选择器后面的那个类型;默认是分
+        typeList: [{ 'count': 'fiveminute', 'name': '五分' }, {
+          'count': 'hour',
+          'name': '小时'
+        }, { 'count': 'today', 'name': '今日' }],
+        dateFormat: 'YYYY/MM/DD',
+        wangzhenglianluSelect: false,//网证链路
+        showEcharts: false,
+        loading_echarts: false,
+        clickLineFlag: false,
+        loading_gojs1: true,
+        renzhenglianluSelect: true,//认证链路
+        clickNodeFlag: '',
+        flagTuxing: true,
+        connection_noresponse: null,
+        connection_rst: null,
+        total_byteps: null,
+        serverIp: '',
+        clientIp: '',
+        trading_volume: null,
+        fail_num: null,
+        success_num: null,
+        success_rate: null,
+        request_transport_time: null,
+        trans_handle_time: null,
+        response_transport_time: null,
+        response_rtt: null,
+        yyname: '',
+        values: '',
+        cities1111: [],
+        checkedCities111: [],
+        dialogVisible111: false,
+        dialogVisibleNode: false,
+        // dialogVisible999:false,
+        nodeMenuPanelPosition: { x: 0, y: 0 },
+        isShowNodeMenuPanel: false,
+        isShowCodePanel: false,
+        checkedCities: [],
+        isShowNodeTipsPanel: false,
+        checkedCities11: [],
+        cities: [],
+        addd: {
+          nodes: [],
+          links: []
+        },
+        firstNode: '',
+        secondNode: '',
+        needIds: '',
+        deleteLink: [],
+        nodeArray: [],
+        dialogVisible: false,
+        dialogVisible123: false,
+        selectLineData: '',
+        fromNode: '',
+        linkList: [],
+        ips: '',
+        alreadyIp: [],
+        jiedianValue: '',
+        fromIpNow: '',
+        jiedianNum: 0,
+        cities123: [],
+        savalink: [],
+        savalinkdelete: [],
+        finshLink: [],
+        g_loading: true,
+        demoname: '---',
+        checked_sex: '',
+        checked_isgoodman: '',
+        graphOptions: {
+          defaultNodeBorderWidth: 0,
+          defaultNodeColor: 'rgba(238, 178, 94, 1)',
+          allowSwitchLineShape: true,
+          allowSwitchJunctionPoint: true,
+          defaultLineShape: 1,
+          'layouts': [
+            {
+              'label': '中心布局',
+              'layoutName': 'center',
+              'layoutClassName': 'seeks-layout-force'
+            }
+          ],
+          defaultJunctionPoint: 'border',
+          'defaultLineWidth': 2,
+          'defaultNodeBorderWidth': 1,
+          'disableZoom': true
+          // 这里可以参考"Graph 图谱"中的参数进行设置
+        }
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.initGuanXi()
+      this.demoname = this.$route.params.demoname
+      selectNodeAndLinkList().then((response) => {
+        this.addd = response.data
+        console.log(this.addd)
+        for (var i = 0; i < this.addd.nodes.length; i++) {
+          this.addd.nodes[i].text = this.addd.nodes[i].text + this.addd.nodes[i].appName
+        }
+        this.setGraphData()
+      })
+
+    },
+    methods: {
+      goback() {
+        this.clickNodeEchartsFlag = false
+        this.flagTuxing = true
+        this.loading_gojs = true
+
+        selectNodeAndLinkList().then((response) => {
+          this.addd = response.data
+          console.log(this.addd)
+          for (var i = 0; i < this.addd.nodes.length; i++) {
+            this.addd.nodes[i].text = this.addd.nodes[i].text + this.addd.nodes[i].appName
+          }
+          this.setGraphData()
+        })
+      },
+      goback1() {
+        this.clickLineFlag = false
+        this.flagTuxing = true
+        this.loading_gojs1 = true
+
+        selectNodeAndLinkList().then((response) => {
+          this.addd = response.data
+          console.log(this.addd)
+          for (var i = 0; i < this.addd.nodes.length; i++) {
+            this.addd.nodes[i].text = this.addd.nodes[i].text + this.addd.nodes[i].appName
+          }
+          this.setGraphData()
+        })
+      },
+      //时间变化;
+      changeTime(date, dateString) {
+        this.selectTime = dateString
+      },
+      changeTimeType(e) {
+        this.selectTimeType = e
+      },
+      //点击查看图形
+      showNodeEcharts() {
+        this.dialogVisibleNode = false
+        this.selectTimeType = 'today'
+        this.selectTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
+        this.requestData_nodeEcharts()
+      },
+      requestData_nodeEcharts() {
+        this.loading_gojs = true
+        this.flagTuxing = false
+        this.loading_echarts = true
+        this.clickNodeEchartsFlag = true
+        this.clickLineFlag = false
+        this.showEcharts = true
+        var obj = {
+          serverIpName: this.needIds,
+          startTime: this.selectTime,
+          type: this.selectTimeType
+        }
+        ///这个接口需要改变
+        clickNodeSelectEcharts_renzhengIp(obj).then((response) => {
+          this.loading_gojs = false
+          this.loading_echarts = false
+          this.showEcharts = true
+          //并发量;√
+          this.drawbingfaliang(response.data)
+          //交易处理量统计
+          this.drawJiaoyichuliliangCount(response.data)
+          //请求传输时间
+          this.drawRequestAttrTime(response.data)
+          //响应时间;
+          this.drawResponceTime(response.data)
+          //响应传输时间;
+          this.drawResponseAttrTime(response.data)
+          //交易处理时间
+          this.drawJiaoyichuliTime(response.data)
+        })
+      },
+
+      //线图请求;
+      cancelOk() {
+        this.values = ''
+        this.yyname = ''
+        this.dialogVisible123 = false
+      },
+      cancelOk1() {
+        // this.dialogVisible999 = false
+      },
+      cancelOk2() {
+        this.dialogVisibleNode = false
+      },
+      handleChange(val) {
+        this.jiedianValue = val
+
+      },
+
+      drawLineEcharts(id, data, filter_data, gaojingdata, title, yAxistype) {
+        // 连接请求无响应次数
+        let myChart = this.$echarts.init(document.getElementById(id))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '5%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontFamily: 'Times New Roman'
+              },
+              formatter(value) {
+                if (yAxistype == 'byteData') {
+                  var temp = parseInt(value)
+                  if (temp / 1024 < 1) {
+                    return temp + 'B'
+                  } else if ((temp / 1024) > 1 && (temp / 1024 / 1024) < 1) {
+                    return parseInt(temp / 1024) + 'KB'
+                  } else {
+                    return parseInt(temp / 1024 / 1024) + 'M'
+                  }
+                } else {
+                  return value
+                }
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: title,
+              data: data,
+              type: 'line',
+              axisLabel: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                // name:"警戒线",
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  formatter() {
+                    var temp = parseInt(gaojingdata)
+                    if (temp / 1024 < 1) {
+                      return gaojingdata + 'B'
+                    } else if ((temp / 1024) > 1 && (temp / 1024 / 1024) < 1) {
+                      return parseInt(temp / 1024) + 'KB'
+                    } else {
+                      return parseInt(temp / 1024 / 1024) + 'M'
+                    }
+                  },
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: gaojingdata
+                }]
+              }
+              // symbol: 'none'  //取消折点圆圈
+            }, {
+              name: '拟合曲线',
+              data: filter_data,
+              type: 'line',
+              // symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //并发量 画图; √
+      drawbingfaliang(data) {
+        let myChart = this.$echarts.init(document.getElementById('bingfaliangid'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '并发量',
+              type: 'line',
+              data: data.countList,
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              }, markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  yAxis: data.tokens_line
+                }]
+              }
+            },
+            {
+              name: '拟合曲线',
+              type: 'line',
+              data: data.fittedCurveCount,
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易处理时间 √
+      drawJiaoyichuliTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('jiaoyichuliTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '处理时间',
+              data: data.transhandletimeList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: data.processing_time_alarm_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveTransHandleTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //请求传输时间 √
+      drawRequestAttrTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('requestattrtimeid'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '请求传输时间',
+              data: data.requesttransporttimeList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: data.request_transfer_time_alarm_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            }, {
+              name: '拟合曲线',
+              data: data.fittedCurveRequestTransportTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //响应时间 √
+      drawResponceTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('responseTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '响应时间',
+              data: data.requestrttList,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: data.response_time_alarm_line
+                }]
+              }
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveRequestRtt,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //响应传输时间 √
+      drawResponseAttrTime(data) {
+        let myChart = this.$echarts.init(document.getElementById('responseAttrTimeId'))
+        // 绘制图表
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '响应传输时间',
+              data: data.responsetransporttimeList,
+              symbol: 'none',  //取消折点圆圈
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: data.response_transfer_time_alarm_line
+                }]
+              }
+            },
+            {
+              name: '拟合曲线',
+              data: data.fittedCurveResponseTransportTime,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      //交易处理量统计 √
+      drawJiaoyichuliliangCount(data) {
+        let myChart = this.$echarts.init(document.getElementById('jiaoyichuliliangCountId'))
+        // 绘制图表
+        myChart.setOption({
+          title: {
+            textStyle: {
+              color: 'red',
+              fontSize: 13,
+              fontWeight: 'normal',
+              fontFamily: '微软雅黑'
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          grid: {
+            left: '5%',
+            right: '6%',
+            top: '7%',
+            bottom: '2%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontSize: 14,      //更改坐标轴文字大小
+                fontFamily: 'Times New Roman'
+              }
+            },
+            lineStyle: {
+              color: '#ffffff',
+              width: 1,
+              type: 'solid'
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#ffffff'
+              }
+            }
+          },
+          series: [
+            {
+              name: '交易量',
+              data: data.totalList,
+              type: 'line',
+              lineStyle: {
+                normal: {
+                  color: '#0576FF'
+                }
+              },
+              markLine: {   //添加警戒线
+                symbol: 'none',//去掉警戒线最后面的箭头
+                silent: true,
+                label: {
+                  show: false,
+                  position: 'start',//将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
+                  color: 'red',
+                  fontSize: 14
+                },
+                data: [{
+                  silent: true,//鼠标悬停事件  true没有，false有
+                  lineStyle: {//警戒线的样式  ，虚实  颜色
+                    type: 'dashed',
+                    color: 'red'
+                  },
+                  name: '警戒线',
+                  yAxis: data.amount_line
+                }]
+              },
+              symbol: 'none'  //取消折点圆圈
+            },
+            {
+              name: '拟合曲线',
+              data: data.totalCurveCount,
+              type: 'line',
+              symbol: 'none',  //取消折点圆圈
+              lineStyle: {
+                normal: {
+                  color: '#7fff6e'
+                }
+              }
+            }
+          ]
+        })
+      },
+      handleSearch(val) {
+        if (val.length > 3) {
+          this.cities123 = []
+          findIpAndPortByKeyword(val).then((response) => {
+            for (var i = 0; i < response.data.length; i++) {
+              let obj = {}
+              obj['value'] = response.data[i]
+              obj['label'] = response.data[i]
+              this.cities123.push(obj)
+            }
+          })
+        }
+        //  this.jiedianValue =this.values
+      },
+      needIp() {
+        selectNodeListByDisconnet(this.needIds).then((response) => {
+          this.cities = response.data
+        })
+      },
+      querySearchAsync() {
+      },
+      btnLink() {
+        this.finshLink = []
+        console.log(this.needIds)
+        for (var i = 0; i < this.savalink.length; i++) {
+          let obj = {}
+          obj['fromIp'] = this.needIds
+          obj['toIp'] = this.savalink[i]
+          this.finshLink.push(obj)
+        }
+        insertLink(this.finshLink).then((response) => {
+          location.reload()
+        })
+
+        this.dialogVisible = false
+
+      },
+      btnLink111() {
+        this.deleteLink = []
+        console.log(this.needIds)
+        for (var i = 0; i < this.savalinkdelete.length; i++) {
+          let obj = {}
+          obj['fromIp'] = this.needIds
+          obj['toIp'] = this.savalinkdelete[i]
+          this.deleteLink.push(obj)
+        }
+        deleteLink(this.deleteLink).then((response) => {
+          location.reload()
+        })
+        this.dialogVisible111 = false
+      },
+      ipChanges(val) {
+        this.savalink = val
+        console.log(this.savalink)
+        // this.linkList = val
+      },
+      ipChanges111(val) {
+        this.savalinkdelete = val
+      },
+      jiedianADD() {
+        var ipAndPort = this.values.split(':')
+        var pattern = /^([1-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
+        var exp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
+        var reg = ipAndPort[0].match(exp)
+        if (pattern.test(ipAndPort[1]) && reg != null && this.yyname != '') {
+          checkIpUniq(this.values).then((response) => {
+            if (response.data.data) {
+              console.log(this.jiedianValue, this.values, 'g')
+              this.dialogVisible123 = false
+              var graph = this.$refs.seeksRelationGraph
+              var __graph_json_data = {
+                nodes: [
+                  {
+                    'id': this.jiedianValue,
+                    'fixed': true,
+                    'x': 50,
+                    'y': 50,
+                    'appName': this.yyname,
+                    'text': this.jiedianValue + this.yyname,
+                    'color': 'rgba(0, 206, 209, 1)',
+                    'borderColor': '#6cc0ff',
+                    'borderWidth': 3,
+                    'innerHTML': '<div class="c-my-node2" style="background-image: url(http://bpic.588ku.com/element_origin_min_pic/00/84/97/9956e83b719d586.jpg);"><div class="c-node-name2" style="color:#6cc0ff">' + this.jiedianValue + '</div></div>'
+                  }
+                ],
+                links: []
+              }
+              this.addd.nodes.push(__graph_json_data.nodes[0])
+
+              graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
+                // 这些写上当图谱初始化完成后需要执行的代码
+              })
+            } else {
+              this.$message.error(response.data.msg)
+            }
+          })
+
+        } else {
+          this.$message.error('请输入正确的ip端口与应用名称')
+        }
+
+      },
+      // jiedianChange(val){
+      //   this.jiedianNum++
+      //    this.jiedianValue = val
+      // },
+      handleClose() {
+      },
+      initGuanXi() {
+        selectNodeAndLinkList().then((response) => {
+          this.addd = response.data
+        })
+      },
+      save() {
+        // console.log(this.addd)
+        saveNodes(this.addd).then((response) => {
+          if (response.data.code === 200) {
+            this.$message.success(response.data.msg)
+          }
+        })
+      },
+      setGraphData() {
+//       var __graph_json_data = { 'rootId': 'N13',
+//        'nodes':
+//        [{ 'id': 'N1','fixed':true,'x':200,'y':200, 'text': '侯亮平', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014);"><div class="c-node-name2" style="color:#ff875e">侯亮平</div></div>' },
+//         { 'id': 'N2', 'fixed':true,'x':400,'y':400, 'text': '李达康', 'color': '#ec6941', 'borderColor': '#ff875e', 'borderWidth': 3, 'data': { 'isGoodMan': true, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062);"><div class="c-node-name2" style="color:#ff875e">李达康</div></div>' },
+//         { 'id': 'N3','fixed':true,'x':600,'y':200,  'text': '祁同伟', 'color': 'rgba(0, 206, 209, 1)', 'borderColor': '#6cc0ff', 'borderWidth': 3, 'data': { 'isGoodMan': false, 'sexType': '男' }, 'innerHTML': '<div class="c-my-node2" style="background-image: url(https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092);"><div class="c-node-name2" style="color:#6cc0ff">祁同伟</div></div>' },
+//        ],
+//      'links': [{ 'from': 'N2', 'to': 'N1', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N2', 'to': 'N3', 'text': '师生', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '师生' }},
+//           { 'from': 'N1', 'to': 'N3', 'text': '上下级', 'color': '#d2c0a5', 'fontColor': '#d2c0a5', 'data': { 'type': '上下级' }},
+//           ]}
+        this.$refs.seeksRelationGraph.setJsonData(this.addd, (seeksRGGraph) => {
+          // 这些写上当图谱初始化完成后需要执行的代码
+          setTimeout(() => {
+            seeksRGGraph.graphSetting.layouter.stop()
+          }, 1000)
+        })
+      },
+      // onNodeClick(nodeObject, $event) {
+      //   this.nodeArray.push(nodeObject.text)
+      //   this.firstNode =  this.nodeArray[0]
+      //   this.secondNode = this.nodeArray[1]
+      //   //排除自己连自己
+      //   if(this.nodeArray.length>=2){
+      //   if(this.firstNode !== this.secondNode){
+      //      var obj={'from': this.firstNode, 'to':this.secondNode,'text':'链路', 'color': '#d2c0a5', 'fontColor': '#d2c0a5',}
+      //       this.addd.links.push(obj)
+      //       this.save()
+      //       this.$forceUpdate()
+      //       location.reload();
+      //   }
+      //   this.nodeArray=[]
+      //   }
+
+      //   console.log('onNodeClick:', nodeObject)
+      //   this.fromNode = nodeObject.text
+      //   //========================
+      //   this.fromIpNow = nodeObject.text
+      // },
+
+      onNodeClick(nodeObject, $event) {
+        console.log('onNodeClick:', nodeObject)
+
+      },
+      onLineClick(lineObject, $event) {
+        // console.log('onLineClick:', lineObject.fromNode.id,lineObject.toNode.id)
+        this.serverIp = lineObject.fromNode.id
+        this.clientIp = lineObject.toNode.id
+        selectLinkInfo(lineObject.fromNode.id, lineObject.toNode.id).then((response) => {
+          console.log(response)
+          this.connection_noresponse = response.data.connection_noresponse
+          this.connection_rst = response.data.connection_rst
+          this.total_byteps = response.data.total_byteps
+        })
+        this.clickNodeFlag = 'link'
+        // this.dialogVisible999 = true
+
+      },
+      showNodeMenus123(nodeObject, $event) {
+
+        this.currentNode = nodeObject
+        var _base_position = this.$refs.myPage.getBoundingClientRect()
+        console.log('showNodeMenus:', nodeObject, $event)
+        //通过id把x y 配置到json
+        for (var j = 0; j < this.addd.nodes.length; j++) {
+          if (nodeObject.id == this.addd.nodes[j].id) {
+            this.addd.nodes[j].x = $event.x
+            this.addd.nodes[j].y = $event.y
+          }
+        }
+        // this.isShowNodeMenuPanel = true
+        // this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+        // this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+      },
+      showNodeMenus(nodeObject, $event) {
+        this.needIds = nodeObject.id
+        this.currentNode = nodeObject
+        var _base_position = this.$refs.myPage.getBoundingClientRect()
+        console.log('showNodeMenus1:', nodeObject, $event)
+        this.isShowNodeMenuPanel = true
+        this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x
+        this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y
+
+        //传id调取可连接的点的list
+
+      },
+      doAction(nodeobj) {
+        console.log(nodeobj)
+        this.needIp()
+        this.dialogVisible = true
+        this.isShowNodeMenuPanel = false
+      },
+      doAction00(val) {
+        selectAuthIp(this.needIds).then((response) => {
+          console.log(response)
+          this.request_transport_time = response.data.data.request_transport_time
+          this.response_rtt = response.data.data.response_rtt
+          this.response_transport_time = response.data.data.response_transport_time
+          this.trans_handle_time = response.data.data.trans_handle_time
+          this.trading_volume = response.data.data.trading_volume
+          this.fail_num = response.data.data.fail_num
+          this.success_num = response.data.data.success_num
+          this.success_rate = response.data.data.success_rate
+        })
+        this.clickNodeFlag = 'node'
+        this.dialogVisibleNode = true
+        this.isShowNodeMenuPanel = false
+
+      },
+      doAction11(val) {
+        selectNodeListByConnect(this.needIds).then((response) => {
+          this.cities1111 = response.data
+        })
+        this.dialogVisible111 = true
+        this.isShowNodeMenuPanel = false
+      },
+      doAction1() {
+
+        var graph = this.$refs.seeksRelationGraph
+        graph.focusNodeById('N3')
+        graph.getNodeById('N3').borderColor = '#000000'
+        graph.getNodeById('N3').fontColor = '#000000'
+      },
+      doAction2() {
+        var graph = this.$refs.seeksRelationGraph
+        graph.getNodeById('N6').opacity = 0.3
+      },
+      doAction3(targetNodeId) {
+        var graph = this.$refs.seeksRelationGraph
+        var _node_8 = graph.getNodeById('N8')
+        var _target_node = graph.getNodeById(targetNodeId)
+        // 直接改变位置
+        // _node_8.x = _node_3.x - 100
+        // _node_8.y = _node_3.y
+        // 通过动画改变位置
+        animateTo(_node_8, _target_node.x - 50, _target_node.y)
+      },
+      doAction5() {
+        var graph = this.$refs.seeksRelationGraph
+        var _node_8 = graph.getNodeById('N8')
+        _node_8.width = 200
+        _node_8.height = 200
+      },
+      doAction6() {
+        this.dialogVisible123 = true
+
+      }
+    }
+  }
+
+  function animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y) {
+    if (buff_x === undefined) {
+      window.$tmp_x = x
+      window.$tmp_y = y
+      buff_x = node.x - x
+      buff_y = node.y - y
+      direction_x = buff_x < 0 ? -1 : 1
+      direction_y = buff_y < 0 ? -1 : 1
+    }
+    var _speed_x = Math.abs(node.x - x) / 20
+    var _speed_y = Math.abs(node.y - y) / 20
+    if (_speed_x < 4) _speed_x = 4
+    if (_speed_y < 4) _speed_y = 4
+    console.log('animateTo', _speed_x, _speed_y)
+    var _stop = true
+    if (direction_x === -1) {
+      if (node.x < window.$tmp_x) {
+        node.x += _speed_x
+        _stop = false
+      }
+    } else {
+      if (node.x > window.$tmp_x) {
+        node.x -= _speed_x
+        _stop = false
+      }
+    }
+    if (direction_y === -1) {
+      if (node.y < window.$tmp_y) {
+        node.y += _speed_y
+        _stop = false
+      }
+    } else {
+      if (node.y > window.$tmp_y) {
+        node.y -= _speed_y
+        _stop = false
+      }
+    }
+    if (!_stop) {
+      setTimeout(() => {
+        animateTo(node, x, y, buff_x, buff_y, direction_x, direction_y)
+      }, 50)
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+  .c-my-node2 {
+    border: none;
+    background-position: center center;
+    background-size: 100%;
+    height: 74px;
+    width: 74px;
+    border-radius: 40px;
+  }
+
+  .c-node-name2 {
+    width: 160px;
+    margin-left: -40px;
+    text-align: center;
+    margin-top: 85px;
+    position: absolute;
+  }
+
+  .c-node-menu-item {
+    line-height: 30px;
+    padding-left: 10px;
+    cursor: pointer;
+    color: #444444;
+    font-size: 14px;
+    border-top: #efefef solid 1px;
+  }
+
+  .c-node-menu-item:hover {
+    background-color: rgba(66, 187, 66, 0.2);
+  }
+
+  * {
+    font-family: 'Microsoft YaHei' !important;
+  }
+
+  .content {
+    width: 98%;
+    margin: 20px 1%;
+    height: 700px;
+  }
+
+  .jyztchart {
+    height: 300px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+  }
+  .authIpchart {
+    height: 400px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0);
+  }
+  .jyztchart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .jyztchart .content {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+  .authIpchart .title {
+    width: 100%;
+    height: 25px;
+    line-height: 25px;
+    background-color: rgba(204, 204, 204, 0.19);
+    border-radius: 5px;
+    font-size: 12px;
+    color: white;
+    padding: 0 15px;
+  }
+
+  .authIpchart .content {
+    height: 270px;
+    margin-bottom: 5px;
+    width: 100%;
+  }
+  .ant-row-flex.ant-row-flex-space-around {
+    background: #070836 !important;
+    color:#070836 !important;;
+  }
+
+</style>

src/views/trace/trace.vue

+<template>
+  <div>
+    <!-- 输入框 -->
+    <a-row style="background-color:rgba(0,51,102,0.37);height:70px;display: flex;align-items: center;">
+      <a-form-model style="margin:0 10px;" layout="inline">
+        <a-form-model-item >
+          <span style="color:white;">请输入用户标志：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-input v-model="userFlag" type="text"></a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button class="btn btn-primary" @click="searchByUserFlag()" type="primary">
+            提交
+          </a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </a-row>
+    <a-row style="margin-top:20px;">
+      <a-col :span="22" :offset="1">
+        <a-table :columns="columnsTrace" :rowClassName="tableRowClassName" :pagination="false"
+                 :data-source="traceList" size="small" bordered
+                 :customHeaderRow="tableHeader">
+        </a-table>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+  import $ from 'jquery'
+  import {} from '@/api/user.js'
+
+  const clientHeight = $(window).height() - 64
+  const columnsTrace = [
+    {
+      title: '步骤',
+      dataIndex: 'name',
+      scopedSlots: { customRender: 'name' },
+      align: 'center',
+      class: ''
+    },
+    {
+      title: '服务名',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '服务IP',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '业务站点',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '模式',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '返回结果',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '时间',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '平均交易处理时间（ms）',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '平均请求传输时间（ms）',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '平均响应时间（ms）',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+    {
+      title: '平均响应传输时间（ms）',
+      dataIndex: 'handleTime',
+      align: 'center',
+    },
+  ];
+  export default {
+    data() {
+      return {
+        clientHeight: clientHeight,
+        columnsTrace: columnsTrace,
+        traceList:[{
+          name: '步骤数据',
+        }],
+      }
+    },
+    methods: {
+      tableHeader(record){
+        return {
+          style:{
+            'background-color': 'rgba(162,162,162,0.38)',
+          }
+        }
+      },
+      //改变表格的内容区域样式;
+      tableRowClassName(record) {
+        return 'thCss '
+      },
+    }
+  }
+</script>
+<style scoped>
+  * {
+    font-family: 'Microsoft YaHei' !important;
+  }
+</style>

src/views/user/user.vue

+<template>
+  <div :style="[{ minHeight: clientHeight + 'px' },{background: '#070836' },{color: '#ffffff'}]">
+    <!-- 输入框 -->
+    <a-row class="inputDivCss">
+      <!--交易汇聚 选中输入框-->
+      <a-form-model ref="alarmInfo" :model="alarmInfo" style="margin:0 10px;" layout="inline">
+        <!--用户名-->
+        <!-- <a-form-model-item>
+          <span style="color:white!important;">用户名：</span>
+        </a-form-model-item> -->
+        <!-- <a-form-model-item>
+          <a-input mode="combobox" style="width: 200px;color:black;" placeholder="请输入用户名" @blur="selectNodeList(alarmInfo.ywzd)" @change="handleChange" v-model="alarmInfo.ywzd">
+          </a-input>
+        </a-form-model-item> -->
+        <!--姓名-->
+        <a-form-model-item>
+          <span style="color:white!important;">姓名：</span>
+        </a-form-model-item>
+        <a-form-model-item>
+          <!--          <a-input type="text" @change="zhuandaxie_ywzd" v-model="alarmInfo.ywzd"></a-input>-->
+
+          <a-input mode="combobox" style="width: 200px;color:black;" placeholder="请输入姓名" @blur="selectNodeList(alarmInfo.ywzd)" @change="handleChange" v-model="user.realName">
+          </a-input>
+        </a-form-model-item>
+
+        <a-form-model-item>
+          <a-button type="primary" @click="clickSearchBtn"> 查 询</a-button>
+          <a-button style="margin-left:10px" type="primary" @click="adduser"> 新 增</a-button>
+        </a-form-model-item>
+      </a-form-model>
+      <a-modal v-model="visible" title="新增用户" @cancel="cancelOk"	 @ok="handleOk">
+<!--    <a-input  v-model="adduserInfo.real_name" placeholder="真实姓名">-->
+<!--    </a-input>-->
+     <a-input style="margin-top:10px" v-model="adduserInfo.user_name" placeholder="用户名">
+              <a-icon slot="prefix" type="user"/>
+     </a-input>
+      <a-select
+          ref="select"
+          placeholder='请选择权限'
+          style="width: 220px;margin-top: 8px"
+          @focus="focus"
+          @change="changeRole"
+        >
+          <a-select-option value="1">管理员</a-select-option>
+          <a-select-option value="2">用户</a-select-option>
+        </a-select>
+    <a-input  style="margin-top:10px" type="password" v-model="adduserInfo.password" placeholder="密码">
+              <a-icon slot="prefix" type="lock"/>
+    </a-input>
+    <a-input  style="margin-top:10px" type="password" v-model="adduserInfo.replyPassword" placeholder="确认密码">
+          <a-icon slot="prefix" type="lock"/>
+    </a-input>
+    </a-modal>
+    </a-row>
+    <a-row style="margin-top:20px;">
+      <a-col :span="22" :offset="1">
+        <a-spin :spinning="loading" :indicator="indicator">
+          <a-table style="background-color:rgba(123,123,123,0)" :locale="locale" :columns="alarmInfoColumns" :data-source="alarmInfoData" size="large" bordered :pagination="false"
+                   :customHeaderRow="setTableHead" :rowClassName="setTableContent">
+             <span slot="role" slot-scope="text, record">
+               <div v-if="record.role ==1">管理员</div>
+               <div v-else>用户</div>
+             </span>
+             <span slot="status" slot-scope="text, record">
+               <div v-if="record.status ==1">启用</div>
+               <div v-else>禁用</div>
+             </span>
+            <span slot="operation" slot-scope="text, record">
+               <div v-if="record.status ==1 && record.real_name!= 'admin'" style="float: left">
+                 <a-button style="margin-left:10px" type="danger" @click="updateStatus(record.user_name,record.status)">禁用</a-button>
+               </div>
+               <div v-if="record.status ==0 && record.real_name!= 'admin'" style="float: left">
+                 <a-button style="margin-left:10px" type="success" @click="updateStatus(record.user_name,record.status)">启用</a-button>
+               </div>
+              <div v-if="record.real_name!= 'admin'" style="float: left">
+                 <a-button style="margin-left:10px" type="primary" @click="updateRole(record.user_name,record.role)">修改权限</a-button>
+               </div>
+             </span>
+          </a-table>
+        </a-spin>
+      </a-col>
+    </a-row>
+
+    <!--分页-->
+    <a-pagination showQuickJumper v-model="pageParams.currentPage" :pageSizeOptions="pageSizeOptionsPage"
+                  :total="totalCount" :show-total="(totalCount, range) => `${totalCount} 条`"
+                  :page-size="pageParams.pageSize" @change="changePage" @showSizeChange="showSizeChangePage"
+                  style="margin: 20px 0;text-align: center;color:white;">
+    </a-pagination>
+    <a-layout-content>
+      <a-config-provider :locale="locale">
+        <router-view></router-view>
+      </a-config-provider>
+    </a-layout-content>
+  </div>
+</template>
+<script>
+  import $ from 'jquery';
+  import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
+  import moment from 'moment';
+  import {userList, selectYwzdByKeyword,updateRole,updateStatus,userinsertUser} from "@/api/user";
+  import md5 from 'js-md5'
+  const alarmInfoColumns = [
+    //编号;
+    {
+      title: '编号',
+      align: 'center',
+      width: '5%',
+      customRender: (text, record, index) => `${index + 1}`
+    },
+    //客户端机器名称;
+    // {
+    //   title: '用户名',
+    //   align: 'center',
+    //   width: '12%',
+    //   dataIndex: 'user_name'
+    // },
+    //业务站点名称
+    {
+      title: '用户名',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'real_name'
+    },
+    //告警类型;
+    {
+      title: '角色',
+      align: 'center',
+      width: '8%',
+      dataIndex: 'role',
+      scopedSlots: { customRender: 'role' }
+    },
+    //告警时间;
+    {
+      title: '状态',
+      align: 'center',
+      width: '6%',
+      dataIndex: 'status',
+      scopedSlots: { customRender: 'status' }
+    },
+    //告警阈值;
+    {
+      title: '创建时间',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'create_time'
+    },
+    //当前值;
+    {
+      title: '更新时间',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'update_time'
+    },
+    {
+      title: '操作',
+      align: 'left',
+      width: '12%',
+      scopedSlots: { customRender: 'operation' }
+    }
+  ]
+  const alarmInfoData = []
+  const alarmTypeList = [
+    { businessType: 'auth', alarmType: 'amountAlarm', descName: '用户' },
+    { businessType: 'auth', alarmType: 'tokenAlarm', descName: '认证并发告警' },
+    // { businessType: 'kaitong', alarmType: 'amountAlarm', descName: '开通交易量告警' },
+    // { businessType: 'kaitong', alarmType: 'tokenAlarm', descName: '开通并发告警' }
+  ]
+  const alarmInfo = {
+    alarmTpyeList: {
+      auth: [],
+      kaitong: []
+    },//
+    ywzd: '',// 用户标识
+    mode: '',// 模式
+    startTime: '',// 开始时间
+    endTime: '',// 结束时间
+    currentPage: '1',// 当前页
+    pageCount: '20'// 每页条数
+  }
+  const clientHeight = $(window).height() - 64
+  export default {
+    name: 'user',
+    data() {
+      return {
+        adduserInfo:{
+          user_name:'',
+          password:'',
+          real_name:'',
+          replyPassword:'',
+          role:''
+        },
+        visible:false,
+        locale: zhCN,
+        clientHeight,
+        alarmYwSelect: true,// 业务告警选中标志
+        alarmLinkSelect: false,// 链路告警选中标志
+        secondStep: 10,
+        indicator: <a-icon type="sync" style="font-size: 50px;color:green" spin />,
+        defaultStartTime: '',
+        defaultEndTime: '',
+        loading: true,
+        locale: {
+        emptyText: '暂无数据'
+      },
+      pageParams: {
+        currentPage: 1,
+          pageSize: 10
+      },
+      pageSizeOptionsPage: ['10', '20', '30', '40', '50'],
+        totalCount: 0,
+        alarmInfo,
+        selectedItems: [],
+        alarmTypeList,
+        alarmInfoColumns,
+        alarmInfoData,
+        cloneData:[],
+        xuanzeywms:[],
+        user:{
+          currentPage: 1,
+          pageCount: 10,
+          userName:'',
+          realName:''
+      }
+      }
+    },
+    methods:{
+      moment,
+      // 点击业务告警
+      clickYwAlarm(){
+        this.alarmYwSelect = true
+        this.alarmLinkSelect = false
+      },
+      //新增用户
+      adduser(){
+        this.visible = true
+      },
+
+      updateStatus(name,val){
+        if( val == 1){
+          if (confirm('确认禁用该用户吗')){
+            updateStatus({
+              user_name:name,
+              status:0
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }else {
+          if (confirm('确认启用该用户吗')){
+            updateStatus({
+              user_name:name,
+              status:1
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }
+      },
+      updateRole(name,val){
+        if(val==1){
+          if(confirm('是否修改权限为普通用户？')){
+            updateRole({
+              user_name:name,
+              role:2
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }else {
+          if(confirm('是否修改权限为管理员？')){
+            updateRole({
+              user_name:name,
+              role:1
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.userList()
+              }else {
+                this.$message.error(response.data.message)
+              }
+            })
+          }
+        }
+      },
+      changeRole(val){
+        this.adduserInfo.role=val
+      },
+      handleOk(){
+        if(this.adduserInfo.user_name != '' && this.adduserInfo.password !='' && this.adduserInfo.role !=''){
+          if(this.adduserInfo.password == this.adduserInfo.replyPassword){
+            userinsertUser({
+              user_name:md5(this.adduserInfo.user_name),
+              password:md5(this.adduserInfo.password),
+              real_name:this.adduserInfo.user_name,
+              role:this.adduserInfo.role
+            }).then((response) => {
+              if(response.data.success){
+                this.$message.success(response.data.message)
+                this.adduserInfo={}
+                this.userList()
+                this.visible = false
+              }else {
+                this.$message.error(response.data.message)
+              }
+
+            })
+          }else {
+            this.$message.error('两次输入密码不一致')
+          }
+
+        }else{
+          this.$message.error('输入框不能为空')
+        }
+
+
+      },
+      cancelOk(){
+        this.visible = false
+      },
+      // 点击链路告警
+      clickLinkAlarm(){
+        this.alarmYwSelect = false
+        this.alarmLinkSelect = true
+      },
+      clickSearchBtn(){
+        this.userList()
+      },
+      userList(){
+        userList(this.user).then((response) => {
+          this.loading = false
+          this.totalCount = response.data.count
+          this.alarmInfoData = response.data.userList
+        })
+      },
+            //设置table的表头;
+      setTableHead(record) {
+        return {
+          style: {
+            'background-color': '#97a0ab',
+            'font-weight': 'bolder',
+            'font-size': '13px',
+            'color': '#ffffff'
+          }
+        }
+      },
+      setTableContent(record) {
+        return 'tableContent'
+      },
+    },
+    mounted(){
+      var routerPath = this.$route.path.split('/');
+      var currentPage = routerPath[routerPath.length-1];
+      this.userList()
+    }
+  }
+</script>

tests/unit/.eslintrc.js

+module.exports = {
+  env: {
+    jest: true
+  }
+}

tests/unit/components/Breadcrumb.spec.js

+import { mount, createLocalVue } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import ElementUI from 'element-ui'
+import Breadcrumb from '@/components/Breadcrumb/index.vue'
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+localVue.use(ElementUI)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    children: [{
+      path: 'dashboard',
+      name: 'dashboard'
+    }]
+  },
+  {
+    path: '/menu',
+    name: 'menu',
+    children: [{
+      path: 'menu1',
+      name: 'menu1',
+      meta: { title: 'menu1' },
+      children: [{
+        path: 'menu1-1',
+        name: 'menu1-1',
+        meta: { title: 'menu1-1' }
+      },
+      {
+        path: 'menu1-2',
+        name: 'menu1-2',
+        redirect: 'noredirect',
+        meta: { title: 'menu1-2' },
+        children: [{
+          path: 'menu1-2-1',
+          name: 'menu1-2-1',
+          meta: { title: 'menu1-2-1' }
+        },
+        {
+          path: 'menu1-2-2',
+          name: 'menu1-2-2'
+        }]
+      }]
+    }]
+  }]
+
+const router = new VueRouter({
+  routes
+})
+
+describe('Breadcrumb.vue', () => {
+  const wrapper = mount(Breadcrumb, {
+    localVue,
+    router
+  })
+  it('dashboard', () => {
+    router.push('/dashboard')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(1)
+  })
+  it('normal route', () => {
+    router.push('/menu/menu1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(2)
+  })
+  it('nested route', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(4)
+  })
+  it('no meta.title', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-2')
+    const len = wrapper.findAll('.el-breadcrumb__inner').length
+    expect(len).toBe(3)
+  })
+  // it('click link', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const second = breadcrumbArray.at(1)
+  //   console.log(breadcrumbArray)
+  //   const href = second.find('a').attributes().href
+  //   expect(href).toBe('#/menu/menu1')
+  // })
+  // it('noRedirect', () => {
+  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
+  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+  //   const redirectBreadcrumb = breadcrumbArray.at(2)
+  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
+  // })
+  it('last breadcrumb', () => {
+    router.push('/menu/menu1/menu1-2/menu1-2-1')
+    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
+    const redirectBreadcrumb = breadcrumbArray.at(3)
+    expect(redirectBreadcrumb.contains('a')).toBe(false)
+  })
+})

tests/unit/components/Hamburger.spec.js

+import { shallowMount } from '@vue/test-utils'
+import Hamburger from '@/components/Hamburger/index.vue'
+describe('Hamburger.vue', () => {
+  it('toggle click', () => {
+    const wrapper = shallowMount(Hamburger)
+    const mockFn = jest.fn()
+    wrapper.vm.$on('toggleClick', mockFn)
+    wrapper.find('.hamburger').trigger('click')
+    expect(mockFn).toBeCalled()
+  })
+  it('prop isActive', () => {
+    const wrapper = shallowMount(Hamburger)
+    wrapper.setProps({ isActive: true })
+    expect(wrapper.contains('.is-active')).toBe(true)
+    wrapper.setProps({ isActive: false })
+    expect(wrapper.contains('.is-active')).toBe(false)
+  })
+})

tests/unit/components/SvgIcon.spec.js

+import { shallowMount } from '@vue/test-utils'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+describe('SvgIcon.vue', () => {
+  it('iconClass', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
+  })
+  it('className', () => {
+    const wrapper = shallowMount(SvgIcon, {
+      propsData: {
+        iconClass: 'test'
+      }
+    })
+    expect(wrapper.classes().length).toBe(1)
+    wrapper.setProps({ className: 'test' })
+    expect(wrapper.classes().includes('test')).toBe(true)
+  })
+})

tests/unit/utils/formatTime.spec.js

+import { formatTime } from '@/utils/index.js'
+
+describe('Utils:formatTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  const retrofit = 5 * 1000
+
+  it('ten digits timestamp', () => {
+    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
+  })
+  it('test now', () => {
+    expect(formatTime(+new Date() - 1)).toBe('刚刚')
+  })
+  it('less two minute', () => {
+    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
+  })
+  it('less two hour', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
+  })
+  it('less one day', () => {
+    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
+  })
+  it('more than one day', () => {
+    expect(formatTime(d)).toBe('7月13日17时54分')
+  })
+  it('format', () => {
+    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+})

tests/unit/utils/parseTime.spec.js

+import { parseTime } from '@/utils/index.js'
+
+describe('Utils:parseTime', () => {
+  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
+  it('timestamp', () => {
+    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
+  })
+  it('ten digits timestamp', () => {
+    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
+  })
+  it('new Date', () => {
+    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
+  })
+  it('format', () => {
+    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
+    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
+    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(d, '{a}')).toBe('五') // 星期五
+  })
+  it('get the day of the week', () => {
+    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
+  })
+  it('empty argument', () => {
+    expect(parseTime()).toBeNull()
+  })
+})

tests/unit/utils/validate.spec.js

+import { validUsername, isExternal } from '@/utils/validate.js'
+
+describe('Utils:validate', () => {
+  it('validUsername', () => {
+    expect(validUsername('admin')).toBe(true)
+    expect(validUsername('editor')).toBe(true)
+    expect(validUsername('xxxx')).toBe(false)
+  })
+  it('isExternal', () => {
+    expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
+    expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
+    expect(isExternal('/dashboard')).toBe(false)
+    expect(isExternal('./dashboard')).toBe(false)
+    expect(isExternal('dashboard')).toBe(false)
+  })
+})

vue.config.js

+'use strict'
+const path = require('path')
+const defaultSettings = require('./src/settings.js')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = defaultSettings.title || 'vue Admin Template' // page title
+
+// If your port is set to 80,
+// use administrator privileges to execute the command line.
+// For example, Mac: sudo npm run——
+// You can change the port by the following methods:
+// port = 9528 npm run dev OR npm run dev --port = 9528
+const port = process.env.port || process.env.npm_config_port || 8080 // dev port
+
+// All configuration item explanations can be find in https://cli.vuejs.org/config/
+module.exports = {
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  // publicPath: 'linktracesystem',
+  publicPath: '',
+  outputDir: 'dist',
+  // assetsDir: './static',
+  assetsDir: '',
+  lintOnSave: false,
+  productionSourceMap: false,
+  devServer: {
+    port: port,
+    // open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
+    before: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+  chainWebpack(config) {
+    config.plugins.delete('preload') // TODO: need test
+    config.plugins.delete('prefetch') // TODO: need test
+
+    // set svg-sprite-loader
+    config.module
+      .rule('svg')
+      .exclude.add(resolve('src/icons'))
+      .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+
+    // set preserveWhitespace
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions.preserveWhitespace = true
+        return options
+      })
+      .end()
+
+    config
+    // https://webpack.js.org/configuration/devtool/#development
+      .when(process.env.NODE_ENV === 'development',
+        config => config.devtool('cheap-source-map')
+      )
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          config
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .after('html')
+            .use('script-ext-html-webpack-plugin', [{
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+            .end()
+          config
+            .optimization.splitChunks({
+              chunks: 'all',
+              cacheGroups: {
+                libs: {
+                  name: 'chunk-libs',
+                  test: /[\\/]node_modules[\\/]/,
+                  priority: 10,
+                  chunks: 'initial' // only package third parties that are initially dependent
+                },
+                elementUI: {
+                  name: 'chunk-elementUI', // split elementUI into a single package
+                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                },
+                commons: {
+                  name: 'chunk-commons',
+                  test: resolve('src/components'), // can customize your rules
+                  minChunks: 3, //  minimum common number
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
+              }
+            })
+          config.optimization.runtimeChunk('single')
+        }
+      )
+  }
+}