new project

85f65656 · chengcaixia · fd9f2e4c · 85f65656 · 85f65656 · 85f65656
Commit 85f65656 authored Jul 13, 2020 by chengcaixia
56 changed files
--- a/.editorconfig
+++ b/.editorconfig
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/app',
+  ],
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "recovery",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "axios": "^0.18.1",
+    "core-js": "^2.6.5",
+    "echarts": "^4.2.1",
+    "element-ui": "^2.9.0",
+    "file-saver": "^2.0.2",
+    "gcoord": "^0.2.3",
+    "js-cookie": "^2.2.1",
+    "moment": "^2.24.0",
+    "vue": "^2.6.10",
+    "vue-baidu-map": "^0.21.20",
+    "vue-router": "^3.0.3",
+    "vuex": "^3.0.1",
+    "xlsx": "^0.16.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "@vue/eslint-config-airbnb": "^4.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^3.0.4",
+    "less-loader": "^4.1.0",
+    "script-loader": "^0.7.2",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/airbnb"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "jest": {
+    "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"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ],
+    "testMatch": [
+      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
+    ],
+    "testURL": "http://localhost/",
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>巡检平台</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but recovery 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>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app">
+    
+    <router-view/>
+  </div>
+</template>
+<style lang="less">
+
+</style>
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
+#app{
+  background: #efefef;
+}
+*{
+  margin: 0;
+  padding: 0;
+}
+.city-wap{
+  color: #3b4f62;
+  
+  .clearfix{
+    &:after{
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+  p{
+    background: #fff;
+    margin-bottom: 10px;
+    padding: 0 12px;
+  }
+  .search{
+    position: fixed;
+    top: 0;
+    box-shadow: 0 1px 3px 0 rgba(59,79,98,0.1);
+    width: 100%;
+    height: 50px;
+    input{
+      line-height: 50px;
+      width: 100%;
+      border: none;
+      box-shadow: none;
+      padding: 0 10px;
+      &:focus { 
+        outline: none; 
+      } 
+    }
+  }
+  .city-list{
+    .block-60{
+      height: 60px;
+    }
+    ul{
+      padding: 0 10px;
+      li{
+        list-style: none;
+        display: inline-block;
+        margin-right: 10px;
+        width: 29%;
+        margin-bottom: 8px;
+        line-height: 35px;
+        text-align: center;
+        color: #333;
+        border-radius: 3px;
+        background: #fff;
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0 2px;
+      }
+    }
+  }
+  .filter{
+    position: fixed;
+    right: 3px;
+    top: 60px;
+    font-size: 15px;
+    div{
+      margin-top: 2px;
+      text-align: center;
+    }
+  }
+  .active-key{
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    background: #dedede;
+    color: #fff;
+    border-radius: 100%;
+    text-align: center;
+    font-size: 40px;
+  }
+}
+.city{
+  position:relative;
+  .city-components{
+    position: absolute;
+    width: 500px;
+    box-shadow: 0 0 4px 0 rgba(117,117,117,0.5);
+    border-radius: 2px;
+    padding: 20px 21px;
+    .clearfix{
+      &:after{
+        content: '';
+        display: block;
+        clear: both;
+      }
+    }
+    li{
+      list-style: none;
+    }
+    ul{
+      padding: 0;
+      margin: 0;
+    }
+    .filter-tabar{
+      border-bottom: 1px solid #d7d7d7;
+      cursor: pointer;
+      li{
+        text-align: center;
+        padding: 0 14px;
+        float: left;
+        padding-bottom: 14px;
+        font-size: 14px;
+        margin: 0 8px;
+        margin-bottom: -1px;
+        position: relative;
+        &.active{
+          border-bottom: 1px solid #ff7362;
+        }
+      }
+    }
+    .city-content{
+      max-height: 500px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 10px 13px 0 13px;
+      label{
+        display: block;
+        margin-bottom: 5px !important;
+        font-size: 20px !important;
+        margin-left: 0 !important;
+        color: #5f5f5f !important;
+        margin-top: 5px;
+      }
+      li{
+        padding: 6px 0 6px;
+        float: left;
+        text-align: left;
+        font-size: 14px;
+        min-width: 56px;
+        margin-right: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+}
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
--- a/src/assets/data.js
+++ b/src/assets/data.js
+export default [
+  {
+    cityInfo: 'TianJin',
+    cityName: '天津',
+    status: 0,
+    lat: 39.12,
+    lng: 117.2,
+  },
+  {
+    cityInfo: 'WuHan',
+    cityName: '武汉',
+    status: 0,
+    lat: 30.52,
+    lng: 114.31,
+  },
+  {
+    cityInfo: 'ChongQing',
+    cityName: '重庆',
+    status: 0,
+    lat: 29.33,
+    lng: 106.33,
+  },
+  {
+    cityInfo: 'WuXi',
+    cityName: '无锡',
+    status: 0,
+    lat: 31.57,
+    lng: 120.30,
+  },
+  {
+    cityInfo: 'GuiLin',
+    cityName: '桂林',
+    status: 0,
+    lat: 25.27,
+    lng: 110.29,
+  },
+  {
+    cityInfo: 'HangZhou',
+    cityName: '杭州',
+    status: 0,
+    lat: 30.15,
+    lng: 120.10,
+  },
+  {
+    cityInfo: 'ShangHai',
+    cityName: '上海',
+    status: 0,
+    lat: 31.12,
+    lng: 121.26,
+  },
+  {
+    cityInfo: 'Zhengzhou',
+    cityName: '郑州',
+    status: 0,
+    lat: 34.44,
+    lng: 113.42,
+  },
+]
\ No newline at end of file
--- a/src/assets/icon/demo.css
+++ b/src/assets/icon/demo.css
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
--- a/src/assets/icon/demo_index.html
+++ b/src/assets/icon/demo_index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>IconFont Demo</title>
+  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1070822" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">姓名 用户名 昵称</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe624;</span>
+                <div class="name">密码</div>
+                <div class="code-name">&amp;#xe624;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#iconfont') format('svg');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont elxingmingyonghumingnicheng"></span>
+            <div class="name">
+              姓名 用户名 昵称
+            </div>
+            <div class="code-name">.elxingmingyonghumingnicheng
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont elmima"></span>
+            <div class="name">
+              密码
+            </div>
+            <div class="code-name">.elmima
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont elxxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#elxingmingyonghumingnicheng"></use>
+                </svg>
+                <div class="name">姓名 用户名 昵称</div>
+                <div class="code-name">#elxingmingyonghumingnicheng</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#elmima"></use>
+                </svg>
+                <div class="name">密码</div>
+                <div class="code-name">#elmima</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
--- a/src/assets/icon/iconfont.css
+++ b/src/assets/icon/iconfont.css
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1551860039453'); /* IE9 */
+  src: url('iconfont.eot?t=1551860039453#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATcAAsAAAAACZgAAASNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqGBIUhATYCJAMYCw4ABCAFhG0HaBtfCMgehXEsLBShUVnZH3+Ih3/3Q+9L8lNglPUsO1DomVzPJIGbEpussROKhcSfz03fz0e0qqmpbstEgSYQLMUmGpir09NETybHNSb/55jx1j6N/GubS3bQ3mg8ijugA4pIjBS+A8HbpLOYUPjBrJfJ9xNoNy0VOqhvHQgShTgsEDdYrQokFasy0BhahdpxbhFvQag1PSMeAHjj/z5+QXZISJpMPOj0pboeqPwa8/k35vt5IzIPPJ4bs4vI2AQK8aDTewuO2U1Y+yYtsAe2J7dK0tfYzzc+v//8u78fXCVV3pC3XafsJCSNvPnnRSW0nRRzqGkenUwLCL7GCkh8vSEd1r2nZpnqflP552OsiAPd+AUQuLZN4lWSIoQ6rkj0CpQnxgsE0dpa7vf1DXa7qRcvBr58Ociq5VVxJMrdbqu4mXO7xylQpRz4lfNXByKwWjZ9BbjxgiS2vqxT3u6Lwdvc9Wjohie5ilPPIvDm5wXKk0/D1b3RjU/z4BAVEp7PzyPH7A+fLjkvz7/IX8hFBiV+rWLePuf+BOWFXE/RtXLtmj07dgVQq5yBg1fP38v7jetO1P3z/QetNA9cAfMFDlBcbrly515+j0yRIc47YbS3yGu0wLPpvojlqVPrLrtrdJ2RQ/uL1pq4zhnQnSZu3z7RqIipiJqguyHq2HZx+pEvxMZifODjxwNMhaci6iomNjZLcSpSu1xqqkJ8DqmLH4IPYcc7UCvXMwgNRKwatSdKzvnsEyei0fx4msCXiZkTiZHdDXUtAsF4Z/vTO1e72kMEIezlrgLzRrrmyJ0ja4IFwauP3jm6WtrsW1VX7aPcfJsolZz32S8pJW5vVhL1tiq4Q36p/VKvn0sCzB3VuogDB7ETuw4ccBFrAx6k3u9cSyGbDVHyGjYrRTTuXzthYvSuVWuXLPmW/I23/0/8lvQN3k0b58qT/i9Z8jr5dQsiqep8K0XYrDk72Ci0tvN+6oOAtcicB7ALOw8cbIWj/9g+5sVxE896eaeXG8vTvL28Kit5pYYesb8bTAb4n59gEwD5IW4ihI/YC/PB/xSjv9l+xn/v+Tfas/SvRP65Ln3Zua2BRf8XwMm1SoBlfyoZcKpsFcJWy3qy7hOoLnwT6YR2OcefKdjvNZZ+CJwmtFZkM0haTEHWahFRMJvQ6LAFVattaLeh4eIOA6ywKG1YN5NA6HUYkm7HkPV6iCiYV9AY9hWq3sDQ7kz4XrPDcrCyGiutstM9pHoCyWo4M6Mcdllo7Ka1DqPKWlZ4KkVbbWyCzErPrBcaaDNtxTjBNlabbbczJGPlTGQ9eRhtNHJkr5XT0xp7us5u7y3OyGC63ildw5lAZp8VTcWO1oOkNgGJpcExY+xiO1nj97vRtByMVKwDEzfCFJqVDbt1UpZ0mQBEg9YMmngpO9uMpZXNzo7hBzGsOCakeuqmGWWWQ+rt3kuPpmGXTpeR7lUsg81ioNr00+tN7/ImaCduVCNFjhJN1Ggx9oQ1a00aP4Gz6BwxZWY1OtqVCUysSSVel49nVZxkom5o14kOTqRWcRqHGQAAAAA=') format('woff2'),
+  url('iconfont.woff?t=1551860039453') format('woff'),
+  url('iconfont.ttf?t=1551860039453') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1551860039453#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.elxingmingyonghumingnicheng:before {
+  content: "\e623";
+}
+
+.elmima:before {
+  content: "\e624";
+}
+
+.elchexiao:before {
+  content: "\e6e2";
+}
+
+.elzhongzuo:before {
+  content: "\e6f3";
+}
+
+.elbaocun:before {
+  content: "\e6c4";
+}
+
--- a/src/assets/icon/iconfont.eot
+++ b/src/assets/icon/iconfont.eot
--- a/src/assets/icon/iconfont.js
+++ b/src/assets/icon/iconfont.js
+!function(c){var e,a='<svg><symbol id="elxingmingyonghumingnicheng" viewBox="0 0 1024 1024"><path d="M652.3 562.7C741.6 513.3 802 418.2 802 309c0-160.2-129.8-290-290-290-160.2 0-290 129.8-290 290 0 109.2 60.4 204.3 149.7 253.7C184 622.2 48 797.7 48 1005l58 0c0-224.2 181.8-406 406-406 224.2 0 406 181.8 406 406l58 0C976 797.7 840 622.2 652.3 562.7zM280 309c0-128.1 103.9-232 232-232 128.1 0 232 103.9 232 232 0 128.1-103.9 232-232 232C383.9 541 280 437.1 280 309z" fill="#707070" ></path></symbol><symbol id="elmima" viewBox="0 0 1024 1024"><path d="M739.63419875 355.43595235L304.70817565 355.43595235l0-79.80828444c0-100.4535808 88.03378062-179.16668587 200.62754133-179.79583146 110.03057493 0.58254222 192.89138062 77.594624 192.89138062 179.79583146l0 39.96239644c0 10.99839715 9.25077049 19.96954738 20.71520142 19.96954738 11.46443093 0 20.71520142-8.90124515 20.71520143-19.96954738l0-39.96239644c0-124.47762205-99.98754702-218.47663502-232.97028552-219.68832284l-2.65639253 0c-135.14979555 1.21168782-240.7530496 97.26124942-240.7530496 219.68832284l0 81.90543644c-70.06817849 9.8566144-124.29120853 67.57489778-124.29120853 137.7828864l0 259.6507193c0 77.1751936 65.011712 139.83343502 145.00640995 139.83343502l455.66452623 0c80.04130133 0 145.00640995-62.65824142 145.00640995-139.83343502L884.6639104 495.31599075C884.64060871 418.18740053 819.55899165 355.43595235 739.63419875 355.43595235L739.63419875 355.43595235 739.63419875 355.43595235zM843.21020587 754.89680498c0 55.10849422-46.44026595 99.87103858-103.57600712 99.87103857L283.99297422 854.76784355c-57.13574115 0-103.50610205-44.78584605-103.50610204-99.87103857L180.48687218 495.26938738c0-55.10849422 46.44026595-99.8244352 103.50610204-99.8244352l455.66452623 0c57.20564622 0 103.57600711 44.78584605 103.5760071 99.8244352L843.23350755 754.89680498 843.21020587 754.89680498zM511.7902848 475.27653831c-68.50696533 0-124.29120853 53.73369458-124.29120853 119.86388764 0 59.3494016 45.13537138 108.4227584 103.99543751 117.81333903-0.04660338 0.72235235-0.44273209 1.2582912-0.44273209 1.98064355l0 59.93194382c0 11.06830222 9.25077049 20.03945245 20.71520142 20.03945245s20.71520142-8.97115022 20.71520142-20.03945245L532.48218453 714.95771022c0-0.74565405-0.37282702-1.2582912-0.44273208-1.98064355 58.88336782-9.39058062 103.99543751-58.46393742 103.9954375-117.81333902C636.08149333 529.03353458 580.34385351 475.27653831 511.7902848 475.27653831L511.7902848 475.27653831 511.7902848 475.27653831zM511.7902848 675.06521885c-45.67131022 0-82.86080569-35.90790258-82.86080569-79.85488783 0-44.08679538 37.23609885-79.85488782 82.86080569-79.85488782 45.62470685 0 82.74429725 35.8612992 82.74429725 79.85488782C594.65109049 639.18061795 557.46159502 675.06521885 511.7902848 675.06521885L511.7902848 675.06521885 511.7902848 675.06521885z" fill="#707070" ></path></symbol><symbol id="elchexiao" viewBox="0 0 1024 1024"><path d="M289.6384 256H614.4a307.2 307.2 0 1 1 0 614.4H204.8a51.2 51.2 0 0 1 0-102.4h409.6a204.8 204.8 0 1 0 0-409.6H286.0032l59.2384 59.2384A51.2 51.2 0 1 1 272.7936 489.984L128 345.2416a51.2 51.2 0 0 1 0-72.448L272.7936 128a51.2 51.2 0 0 1 72.448 72.3968L289.6384 256z" fill="#666666" ></path></symbol><symbol id="elzhongzuo" viewBox="0 0 1024 1024"><path d="M737.9968 256l-55.6032-55.6032A51.2 51.2 0 1 1 754.8416 128l144.7936 144.7936a51.2 51.2 0 0 1 0 72.448L754.8416 489.984a51.2 51.2 0 0 1-72.448-72.3968L741.632 358.4H409.6a204.8 204.8 0 1 0 0 409.6h409.6a51.2 51.2 0 0 1 0 102.4H409.6A307.2 307.2 0 1 1 409.6 256h328.3968z" fill="#666666" ></path></symbol><symbol id="elbaocun" viewBox="0 0 1024 1024"><path d="M127.99 127.99h768.02l0.164 767.649-768.149 0.336-0.035-767.985z m63.794 63.794l0.253 640.179 640.124 0.199V191.838l-640.377-0.054z m6.449 0"  ></path><path d="M640.149 464.851V191.784h45.512v318.579H321.575V191.784h45.508v273.067z"  ></path><path d="M640.149 191.784h63.988v320.343H320.062V191.784h64.013v256.425h256.049z"  ></path><path d="M512.099 191.784h64.012v128.212h-64.012z"  ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(n=e,l=c.document,o=!1,i=function(){o||(o=!0,n())},(a=function(){try{l.documentElement.doScroll("left")}catch(e){return void setTimeout(a,50)}i()})(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,i())});var n,l,o,i,a}(function(){var e,t,n,l,o,i;(e=document.createElement("div")).innerHTML=a,a=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(l=document.body).firstChild?(o=n,(i=l.firstChild).parentNode.insertBefore(o,i)):l.appendChild(n))})}(window);
\ No newline at end of file
--- a/src/assets/icon/iconfont.svg
+++ b/src/assets/icon/iconfont.svg
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="xingmingyonghumingnicheng" unicode="&#58915;" d="M652.3 333.29999999999995C741.6 382.70000000000005 802 477.8 802 587c0 160.2-129.8 290-290 290-160.2 0-290-129.8-290-290 0-109.2 60.4-204.3 149.7-253.7C184 273.79999999999995 48 98.29999999999995 48-109l58 0c0 224.2 181.8 406 406 406 224.2 0 406-181.8 406-406l58 0C976 98.29999999999995 840 273.79999999999995 652.3 333.29999999999995zM280 587c0 128.1 103.9 232 232 232 128.1 0 232-103.9 232-232 0-128.1-103.9-232-232-232C383.9 355 280 458.9 280 587z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="mima" unicode="&#58916;" d="M739.63419875 540.56404765L304.70817565 540.56404765l0 79.80828444c0 100.4535808 88.03378062 179.16668587 200.62754133 179.79583146 110.03057493-0.58254222 192.89138062-77.594624 192.89138062-179.79583146l0-39.96239644c0-10.99839715 9.25077049-19.96954738 20.71520142-19.96954738 11.46443093 0 20.71520142 8.90124515 20.71520143 19.96954738l0 39.96239644c0 124.47762205-99.98754702 218.47663502-232.97028552 219.68832284l-2.65639253 0c-135.14979555-1.21168782-240.7530496-97.26124942-240.7530496-219.68832284l0-81.90543644c-70.06817849-9.8566144-124.29120853-67.57489778-124.29120853-137.7828864l0-259.6507193c0-77.1751936 65.011712-139.83343502 145.00640995-139.83343502l455.66452623 0c80.04130133 0 145.00640995 62.65824142 145.00640995 139.83343502L884.6639104 400.68400925C884.64060871 477.81259947 819.55899165 540.56404765 739.63419875 540.56404765L739.63419875 540.56404765 739.63419875 540.56404765zM843.21020587 141.10319502000004c0-55.10849422-46.44026595-99.87103858-103.57600712-99.87103857L283.99297422 41.23215645000005c-57.13574115 0-103.50610205 44.78584605-103.50610204 99.87103857L180.48687218 400.73061262c0 55.10849422 46.44026595 99.8244352 103.50610204 99.8244352l455.66452623 0c57.20564622 0 103.57600711-44.78584605 103.5760071-99.8244352L843.23350755 141.10319502000004 843.21020587 141.10319502000004zM511.7902848 420.72346169c-68.50696533 0-124.29120853-53.73369458-124.29120853-119.86388764 0-59.3494016 45.13537138-108.4227584 103.99543751-117.81333903-0.04660338-0.72235235-0.44273209-1.2582912-0.44273209-1.98064355l0-59.93194382c0-11.06830222 9.25077049-20.03945245 20.71520142-20.03945245s20.71520142 8.97115022 20.71520142 20.03945245L532.48218453 181.04228978000003c0 0.74565405-0.37282702 1.2582912-0.44273208 1.98064355 58.88336782 9.39058062 103.99543751 58.46393742 103.9954375 117.81333902C636.08149333 366.96646541999996 580.34385351 420.72346169 511.7902848 420.72346169L511.7902848 420.72346169 511.7902848 420.72346169zM511.7902848 220.93478115000005c-45.67131022 0-82.86080569 35.90790258-82.86080569 79.85488783 0 44.08679538 37.23609885 79.85488782 82.86080569 79.85488782 45.62470685 0 82.74429725-35.8612992 82.74429725-79.85488782C594.65109049 256.81938204999994 557.46159502 220.93478115000005 511.7902848 220.93478115000005L511.7902848 220.93478115000005 511.7902848 220.93478115000005z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="chexiao" unicode="&#59106;" d="M289.6384 640H614.4a307.2 307.2 0 1 0 0-614.4H204.8a51.2 51.2 0 0 0 0 102.4h409.6a204.8 204.8 0 1 1 0 409.6H286.0032l59.2384-59.2384A51.2 51.2 0 1 0 272.7936 406.016L128 550.7584a51.2 51.2 0 0 0 0 72.448L272.7936 768a51.2 51.2 0 0 0 72.448-72.3968L289.6384 640z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhongzuo" unicode="&#59123;" d="M737.9968 640l-55.6032 55.6032A51.2 51.2 0 1 0 754.8416 768l144.7936-144.7936a51.2 51.2 0 0 0 0-72.448L754.8416 406.016a51.2 51.2 0 0 0-72.448 72.3968L741.632 537.6H409.6a204.8 204.8 0 1 1 0-409.6h409.6a51.2 51.2 0 0 0 0-102.4H409.6A307.2 307.2 0 1 0 409.6 640h328.3968z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="baocun" unicode="&#59076;" d="M127.99 768.01h768.02l0.164-767.649-768.149-0.336-0.035 767.985z m63.794-63.794l0.253-640.179 640.124-0.199V704.162l-640.377 0.054z m6.449 0M640.149 431.149V704.216h45.512v-318.579H321.575V704.216h45.508v-273.067zM640.149 704.216h63.988v-320.343H320.062V704.216h64.013v-256.425h256.049zM512.099 704.216h64.012v-128.212h-64.012z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>
--- a/src/assets/icon/iconfont.ttf
+++ b/src/assets/icon/iconfont.ttf
--- a/src/assets/icon/iconfont.woff
+++ b/src/assets/icon/iconfont.woff
--- a/src/assets/icon/iconfont.woff2
+++ b/src/assets/icon/iconfont.woff2
--- a/src/assets/img/.DS_Store
+++ b/src/assets/img/.DS_Store
--- a/src/assets/img/17615.jpg
+++ b/src/assets/img/17615.jpg
--- a/src/assets/img/bglogo.jpeg
+++ b/src/assets/img/bglogo.jpeg
--- a/src/assets/img/jingbao_blue.png
+++ b/src/assets/img/jingbao_blue.png
--- a/src/assets/img/jingbao_red.png
+++ b/src/assets/img/jingbao_red.png
--- a/src/assets/img/map-marker-2-32.png
+++ b/src/assets/img/map-marker-2-32.png
--- a/src/assets/img/map-marker_blue.png
+++ b/src/assets/img/map-marker_blue.png
--- a/src/assets/img/map-marker_gold.png
+++ b/src/assets/img/map-marker_gold.png
--- a/src/assets/img/map-marker_orange.png
+++ b/src/assets/img/map-marker_orange.png
--- a/src/assets/img/map-marker_red.png
+++ b/src/assets/img/map-marker_red.png
--- a/src/assets/img/map-marker_yellow.png
+++ b/src/assets/img/map-marker_yellow.png
--- a/src/assets/img/marker_red_sprite.png
+++ b/src/assets/img/marker_red_sprite.png
--- a/src/assets/img/qidian.png
+++ b/src/assets/img/qidian.png
--- a/src/assets/img/regist.jpeg
+++ b/src/assets/img/regist.jpeg
--- a/src/assets/img/un_map_spot3.png
+++ b/src/assets/img/un_map_spot3.png
--- a/src/assets/img/zhongdian.png
+++ b/src/assets/img/zhongdian.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo_new.png
+++ b/src/assets/logo_new.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/config.js
+++ b/src/config.js
+const address = 'http://152.136.233.116:8083/roadlinks/getCapitalImg?imgName=';
+// const address = 'http://vmax.corp.roadlinks.cn:8088/roadlinks/';
+// const address = 'http://127.0.0.1:8088/roadlinks/';
+// const address = 'http://193.112.197.170:8080/roadlinks/';
+// const address = 'http://172.16.40.196:29980/roadlinks/';
+export default address;
--- a/src/excel/Blob.js
+++ b/src/excel/Blob.js
+/* eslint-disable */
+/* Blob.js
+ * A Blob implementation.
+ * 2014-05-27
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+ plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+    "use strict";
+
+    view.URL = view.URL || view.webkitURL;
+
+    if (view.Blob && view.URL) {
+        try {
+            new Blob;
+            return;
+        } catch (e) {}
+    }
+
+    // Internally we use a BlobBuilder implementation to base Blob off of
+    // in order to support older browsers that only have BlobBuilder
+    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+            var
+                get_class = function(object) {
+                    return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+                }
+                , FakeBlobBuilder = function BlobBuilder() {
+                    this.data = [];
+                }
+                , FakeBlob = function Blob(data, type, encoding) {
+                    this.data = data;
+                    this.size = data.length;
+                    this.type = type;
+                    this.encoding = encoding;
+                }
+                , FBB_proto = FakeBlobBuilder.prototype
+                , FB_proto = FakeBlob.prototype
+                , FileReaderSync = view.FileReaderSync
+                , FileException = function(type) {
+                    this.code = this[this.name = type];
+                }
+                , file_ex_codes = (
+                    "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+                    + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+                ).split(" ")
+                , file_ex_code = file_ex_codes.length
+                , real_URL = view.URL || view.webkitURL || view
+                , real_create_object_URL = real_URL.createObjectURL
+                , real_revoke_object_URL = real_URL.revokeObjectURL
+                , URL = real_URL
+                , btoa = view.btoa
+                , atob = view.atob
+
+                , ArrayBuffer = view.ArrayBuffer
+                , Uint8Array = view.Uint8Array
+                ;
+            FakeBlob.fake = FB_proto.fake = true;
+            while (file_ex_code--) {
+                FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+            }
+            if (!real_URL.createObjectURL) {
+                URL = view.URL = {};
+            }
+            URL.createObjectURL = function(blob) {
+                var
+                    type = blob.type
+                    , data_URI_header
+                    ;
+                if (type === null) {
+                    type = "application/octet-stream";
+                }
+                if (blob instanceof FakeBlob) {
+                    data_URI_header = "data:" + type;
+                    if (blob.encoding === "base64") {
+                        return data_URI_header + ";base64," + blob.data;
+                    } else if (blob.encoding === "URI") {
+                        return data_URI_header + "," + decodeURIComponent(blob.data);
+                    } if (btoa) {
+                        return data_URI_header + ";base64," + btoa(blob.data);
+                    } else {
+                        return data_URI_header + "," + encodeURIComponent(blob.data);
+                    }
+                } else if (real_create_object_URL) {
+                    return real_create_object_URL.call(real_URL, blob);
+                }
+            };
+            URL.revokeObjectURL = function(object_URL) {
+                if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+                    real_revoke_object_URL.call(real_URL, object_URL);
+                }
+            };
+            FBB_proto.append = function(data/*, endings*/) {
+                var bb = this.data;
+                // decode data to a binary string
+                if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+                    var
+                        str = ""
+                        , buf = new Uint8Array(data)
+                        , i = 0
+                        , buf_len = buf.length
+                        ;
+                    for (; i < buf_len; i++) {
+                        str += String.fromCharCode(buf[i]);
+                    }
+                    bb.push(str);
+                } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+                    if (FileReaderSync) {
+                        var fr = new FileReaderSync;
+                        bb.push(fr.readAsBinaryString(data));
+                    } else {
+                        // async FileReader won't work as BlobBuilder is sync
+                        throw new FileException("NOT_READABLE_ERR");
+                    }
+                } else if (data instanceof FakeBlob) {
+                    if (data.encoding === "base64" && atob) {
+                        bb.push(atob(data.data));
+                    } else if (data.encoding === "URI") {
+                        bb.push(decodeURIComponent(data.data));
+                    } else if (data.encoding === "raw") {
+                        bb.push(data.data);
+                    }
+                } else {
+                    if (typeof data !== "string") {
+                        data += ""; // convert unsupported types to strings
+                    }
+                    // decode UTF-16 to binary string
+                    bb.push(unescape(encodeURIComponent(data)));
+                }
+            };
+            FBB_proto.getBlob = function(type) {
+                if (!arguments.length) {
+                    type = null;
+                }
+                return new FakeBlob(this.data.join(""), type, "raw");
+            };
+            FBB_proto.toString = function() {
+                return "[object BlobBuilder]";
+            };
+            FB_proto.slice = function(start, end, type) {
+                var args = arguments.length;
+                if (args < 3) {
+                    type = null;
+                }
+                return new FakeBlob(
+                    this.data.slice(start, args > 1 ? end : this.data.length)
+                    , type
+                    , this.encoding
+                );
+            };
+            FB_proto.toString = function() {
+                return "[object Blob]";
+            };
+            FB_proto.close = function() {
+                this.size = this.data.length = 0;
+            };
+            return FakeBlobBuilder;
+        }(view));
+
+    view.Blob = function Blob(blobParts, options) {
+        var type = options ? (options.type || "") : "";
+        var builder = new BlobBuilder();
+        if (blobParts) {
+            for (var i = 0, len = blobParts.length; i < len; i++) {
+                builder.append(blobParts[i]);
+            }
+        }
+        return builder.getBlob(type);
+    };
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
--- a/src/excel/Export2Excel.js
+++ b/src/excel/Export2Excel.js
+/* eslint-disable */
+require('script-loader!file-saver');
+require('./Blob');
+require('script-loader!xlsx/dist/xlsx.core.min');
+function generateArray(table) {
+    var out = [];
+    var rows = table.querySelectorAll('tr');
+    var ranges = [];
+    for (var R = 0; R < rows.length; ++R) {
+        var outRow = [];
+        var row = rows[R];
+        var columns = row.querySelectorAll('td');
+        for (var C = 0; C < columns.length; ++C) {
+            var cell = columns[C];
+            var colspan = cell.getAttribute('colspan');
+            var rowspan = cell.getAttribute('rowspan');
+            var cellValue = cell.innerText;
+            if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+            //Skip ranges
+            ranges.forEach(function (range) {
+                if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
+                    for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+                }
+            });
+
+            //Handle Row Span
+            if (rowspan || colspan) {
+                rowspan = rowspan || 1;
+                colspan = colspan || 1;
+                ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
+            }
+            ;
+
+            //Handle Value
+            outRow.push(cellValue !== "" ? cellValue : null);
+
+            //Handle Colspan
+            if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+        }
+        out.push(outRow);
+    }
+    return [out, ranges];
+};
+
+function datenum(v, date1904) {
+    if (date1904) v += 1462;
+    var epoch = Date.parse(v);
+    return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+    var ws = {};
+    var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
+    for (var R = 0; R != data.length; ++R) {
+        for (var C = 0; C != data[R].length; ++C) {
+            if (range.s.r > R) range.s.r = R;
+            if (range.s.c > C) range.s.c = C;
+            if (range.e.r < R) range.e.r = R;
+            if (range.e.c < C) range.e.c = C;
+            var cell = {v: data[R][C]};
+            if (cell.v == null) continue;
+            var cell_ref = XLSX.utils.encode_cell({c: C, r: R});
+
+            if (typeof cell.v === 'number') cell.t = 'n';
+            else if (typeof cell.v === 'boolean') cell.t = 'b';
+            else if (cell.v instanceof Date) {
+                cell.t = 'n';
+                cell.z = XLSX.SSF._table[14];
+                cell.v = datenum(cell.v);
+            }
+            else cell.t = 's';
+
+            ws[cell_ref] = cell;
+        }
+    }
+    if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
+    return ws;
+}
+
+function Workbook() {
+    if (!(this instanceof Workbook)) return new Workbook();
+    this.SheetNames = [];
+    this.Sheets = {};
+}
+
+function s2ab(s) {
+    var buf = new ArrayBuffer(s.length);
+    var view = new Uint8Array(buf);
+    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+    return buf;
+}
+
+export function export_table_to_excel(id) {
+    var theTable = document.getElementById(id);
+    console.log('a')
+    var oo = generateArray(theTable);
+    var ranges = oo[1];
+
+    /* original data */
+    var data = oo[0];
+    var ws_name = "SheetJS";
+    console.log(data);
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+    /* add ranges to worksheet */
+    // ws['!cols'] = ['apple', 'banan'];
+    ws['!merges'] = ranges;
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx")
+}
+
+function formatJson(jsonData) {
+    console.log(jsonData)
+}
+export function export_json_to_excel(th, jsonData, defaultTitle) {
+
+    /* original data */
+
+    var data = jsonData;
+    data.unshift(th);
+    var ws_name = "SheetJS";
+
+    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
+
+
+    /* add worksheet to workbook */
+    wb.SheetNames.push(ws_name);
+    wb.Sheets[ws_name] = ws;
+
+    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
+    var title = defaultTitle || '列表'
+    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
+}
--- a/src/main.js
+++ b/src/main.js
+import Vue from 'vue';
+import './assets/css/reset.css';
+import Cookies from 'js-cookie';
+import ElementUI from 'element-ui';
+import BaiduMap from 'vue-baidu-map';
+import 'element-ui/lib/theme-chalk/index.css';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+
+Vue.use(ElementUI);
+Vue.use(BaiduMap, {
+  ak: 'AZzMTSKLP4lVHphRauTBdINZUFnpWTcu',
+});
+
+Vue.config.productionTip = false;
+router.beforeEach((to, from, next) => {
+  window.scrollTo(0,0);
+  if (to.matched.some(record => record.meta.requireAuth)) {
+    // 判断该路由是否需要登录权限
+    if (Cookies.get('id')) { // 判断当前的token是否存在
+      next();
+    } else {
+      // next();
+      next({
+        path: '/login',
+        query: { redirect: to.fullPath },
+        // 将跳转的路由path作为参数，登录成功后跳转到该路由
+      });
+    }
+  } else {
+    next();
+  }
+});
+router.afterEach((to,from,next) => {
+  window.scrollTo(0,0);
+});
+new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#app');
--- a/src/router.js
+++ b/src/router.js
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './views/Home.vue';
+import Overview from './views/Overview.vue';
+import Detail from './views/Detail.vue';
+import Task from './views/Task.vue';
+import Result from './views/Result.vue';
+import ResultDetail from './views/ResultDetail.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+ // base: process.env.BASE_URL,
+  scrollBehavior (to, from, savedPosition) {
+
+    return { x: 0, y: 0 }
+   
+   },
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta: {
+        requireAuth: true,
+      },
+      children: [{
+        path: '/overview',
+        ame: 'overview',
+        component: Overview,
+      }, {
+        path: '/detail',
+        name: 'detail',
+        component: Detail,
+      }, {
+        path: '/task',
+        name: 'task',
+        component: Task,
+      }, {
+        path: '/result',
+        name: 'result',
+        component: Result,
+      },
+      {
+        path: '/resultDetail',
+        name: 'resultDetail',
+        component: ResultDetail,
+      }
+      ],
+    },
+    // 注册页面
+    {
+      path: '/registered',
+      name: 'registered',
+      component: () => import(/* webpackChunkName: "about" */ './views/Registered.vue'),
+    },
+    // 登录页面
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue'),
+    },
+  ],
+});
--- a/src/store.js
+++ b/src/store.js
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+});
--- a/src/views/About.vue
+++ b/src/views/About.vue
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Detail.vue
+++ b/src/views/Detail.vue
+<template>
+  <div class="detail">
+    <div class="box">
+       <el-row class="warp">
+         <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.capitalType"
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="资产类型"
+                    >
+                    <el-option
+                      v-for="item in capitalOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="getCapitalDetails">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+       <!-- 任务表 -->
+      <div class="detail-table">
+ <el-table
+    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    style="width: calc(100vw - 240px);overflow:hidden;"
+    border=true
+    highlight-current-row=true
+    >
+    <el-table-column
+      label="序号"
+      prop="no">
+    </el-table-column>
+    <el-table-column
+      label="道路资产名称"
+      prop="name">
+    </el-table-column>
+     <el-table-column
+      label="道路资产位置信息"
+      prop="position">
+    </el-table-column>
+  </el-table>
+  <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20, 40]" 
+        :page-size="pagesize"        
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">  
+  </el-pagination>
+      </div>
+      
+      <!-- 任务统计 -->
+      <!-- <div class="task-echarts">
+        <h3>任务统计</h3>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div> -->
+       </el-row>
+    </div>
+  </div>
+</template>
+<style lang="less" scope>
+.detail{
+  .box{
+    .el-pagination{
+      padding: 15px;
+    }
+  }
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import echarts from 'echarts';
+import moment from 'moment';
+import address from '../config';
+
+export default {
+  name: 'detail',
+  data() {
+    return {
+      tableData: [
+        
+      ],
+      filters: {
+        capitalType: []
+      },
+      showCol: false,
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      loading: false,
+      no: 0,
+      capitalOptions: [
+        
+      ],
+      currentdate: '',
+      
+    };
+  },
+  mounted() {
+    
+  },
+  created() {
+    this.filters.capitalType = [];
+    if(this.$route.params.capitalName){
+      this.filters.capitalType.push(this.$route.params.capitalName);
+    }
+    this.getCapitalDetails();
+    this.getAllCapitals();
+  },
+  methods: {
+    linkPic(index, row) {
+      this.getCurrentDate();
+      var photoDate = row.finalOnlineTime ? row.finalOnlineTime : this.currentdate;
+      window.open('http://106.52.130.113:9088/'+ photoDate + '/' + row.channelCode + '/' + row.code,'_blank');
+    },
+    getCurrentDate() {
+      var date = new Date();
+      var seperator1 = "-";
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      var currentdate = year + seperator1 + month + seperator1 + strDate;
+      this.currentdate = currentdate;
+    },
+    linkActul(index, row) {
+      this.$router.push({
+        path: '/overview',
+        query: {
+          equipment: row.code,
+          channel: row.channelCode,
+          plateNo: row.plateNo,
+        }
+      });
+    },
+    linkMileage(index, row) {
+      this.$router.push({
+        path: '/mileage',
+        query: {
+          equipment: row.code,
+          channel: row.channelCode,
+          plateNo: row.plateNo,
+          startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
+          endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null,
+        }
+      });
+    },
+    queryEquipSearchAsync(queryString, cb) {
+      var restaurants = this.equips;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    queryPlateSearchAsync(queryString, cb) {
+      var restaurants = this.plateNos;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    queryChannelSearchAsync(query) {
+        if (query !== '') {
+          this.channelLoading = true;
+          setTimeout(() => {
+            this.channelLoading = false;
+            this.channelOptions = this.list.filter(item => {
+              return item.label.toLowerCase()
+                .indexOf(query.toLowerCase()) > -1;
+            });
+          }, 200);
+        } else {
+          this.channelOptions = [];
+        }
+    },
+    
+    // queryChannelSearchAsync(queryString, cb) {
+    //   var restaurants = this.channels;
+    //   var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+    //   clearTimeout(this.timeout);
+    //   this.timeout = setTimeout(() => {
+    //     cb(results);
+    //   }, 3000 * Math.random());
+    // },
+    createStateFilter(queryString) {
+      return (state) => {
+        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
+      };
+    },
+    handleEquipSelect(item){
+      if(item && item.value){
+        this.filters.equipmentNo = item.value;
+      }
+    },
+    handlePlateSelect(item){
+      if(item && item.value){
+        this.filters.plateNo = item.value;
+      }
+    },
+    handleChannelSelect(item){
+      if(item && item.channelId){
+        this.filters.channel = item.channelId;
+        this.filters.channelName = item.value;
+      }
+    },
+    // 初始页currentPage、初始每页数据数pagesize和数据data
+    handleSizeChange: function (size) {
+      this.pagesize = size;
+      console.log(this.pagesize)  //每页下拉显示数据
+    },
+    handleCurrentChange: function(currentPage){
+      this.currentPage = currentPage;
+      console.log(this.currentPage)  //点击第几页
+    },
+    getAllCapitals() {
+      axios.post(`/roadlinks/getAllCapitals`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.capitalOptions = [];
+          if (response.data.data) {
+            console.log(response.data.data);
+            let capitals = response.data.data.capitals;
+            let nameSet = new Set();
+            capitals.forEach((val) => {
+              nameSet.add(val.capitalName);
+            });
+            nameSet.forEach((item) => {
+              if(item) {
+                this.capitalOptions.push({value: item, label: item});
+              }
+            })
+          }
+        } else {
+          
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getCapitalDetails() {
+      this.currentPage = 1;
+      let capitalName = '';
+      if(this.filters.capitalType){
+        this.filters.capitalType.forEach((val) => {
+          if(capitalName === '') {
+            capitalName = capitalName + val;
+          } else {
+            capitalName = capitalName + ',' + val;
+          }
+        });
+      }
+      axios.post(`/roadlinks/getCapitalDetails`, {
+        capitalName: capitalName
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.tableData = [];
+          this.no = 0;
+          if (response.data.data) {
+            let nameMap = new Map();
+            response.data.data.forEach((val) => {
+              if(val.lng && val.lat){
+                //nameSet.add(val.capitalName);
+                let num = 1;
+                if(nameMap.has(val.capitalName)){
+                  num = nameMap.get(val.capitalName) + 1;
+                  nameMap.set(val.capitalName, num);
+                }else{
+                  nameMap.set(val.capitalName, num);
+                }
+                this.tableData.push({no: ++this.no, name: val.capitalName + num, position: val.position});
+              }
+            });
+          }
+        } 
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    isInArray(arr,value){
+	    for(var i = 0; i < arr.length; i++){
+	        if(value === arr[i]){
+	            return true;
+	        }
+	    }
+	    return false;
+	  },
+    queryEquipment() {
+      if(this.filters.channelName){
+        if(this.channelNames.length > 0 && this.isInArray(this.channelNames,this.filters.channelName)){
+          this.channels.forEach((val) => {
+            if(val && val.value == this.filters.channelName){
+              this.filters.channel = val.channelId;
+            }
+          });
+        }else{
+          this.filters.channel = -99;
+        }
+      }else{
+        this.filters.channel = '';
+      }
+
+      axios.post(`/roadlinks/getAllEquipments`, {
+        code: this.filters.equipmentNo,
+        channelId: this.filters.channel,
+        plateNo: this.filters.plateNo,
+        type: this.filters.type,
+        status: this.filters.status,
+        startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
+        endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            response.data.data.forEach((item) => {
+              item.status = (item.status ? '启用' : '未启用');
+              item.type = item.type == 1 ? '小客车' : (item.type == 2 ? '大客车' : (item.type == 3 ? '货车' : ''));
+              item.finalOnlineTime = item.finalOnlineTime ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD") : '';
+            });
+          }
+          this.tableData = response.data.data;
+        } else {
+          this.tableData = [];
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    
+  },
+};
+</script>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
+<template>
+  <div class="home">
+    
+    <el-container>
+      
+  <el-aside width="200px">
+    
+      <el-menu
+      :default-active="onRoutes"
+      active-text-color="#41afdd"
+      background-color="#323346"
+      class="el-menu-vertical-demo">
+      <div class="logo"><img src="../assets/logo_new.png" alt=""></div>
+      <el-submenu index="1">
+        <span slot="title" class="submenu_parent">道路资产管理</span>
+        <el-menu-item index="1-1" @click="goTo('/overview')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">资产汇总</span>
+        </el-menu-item>
+        <el-menu-item index="1-2" @click="goTo('/detail')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">资产明细</span>
+        </el-menu-item>
+      </el-submenu>
+      <el-menu-item index="2" @click="goTo('/task')">
+        <span slot="title">巡检任务管理</span>
+      </el-menu-item>
+      <el-submenu index="3">
+        <span slot="title" class="submenu_parent">巡检结果管理</span>
+        <el-menu-item index="3-1" @click="goTo('/result')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">巡检结果查看</span>
+        </el-menu-item>
+        <el-menu-item index="3-2" @click="goTo('/resultDetail')" style="background:#252639 !important">
+          <span slot="title" style="font-size: 16px">巡检结果明细</span>
+        </el-menu-item>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  <el-container>
+    <el-header>
+      <div class="header-title">安徽省道路综合巡检平台（测试）</div>
+      <span>欢迎您，</span>
+      <span>{{user.name}}</span>
+      <el-button type="text" class="exitSys" @click="esc">退出</el-button>
+    </el-header>
+    <el-main ref="el-main">
+      <router-view/>
+    </el-main>
+  </el-container>
+</el-container>
+  </div>
+</template>
+<style lang="less" scoped>
+.logo{
+  line-height: 50px;
+}
+.exitSys{
+  color: black;
+  background: 0 0;
+  padding-left: 0;
+  padding-right: 0;
+  font-size: 16px;
+}
+.el-container{
+  height: 100vh;
+}
+.el-header {
+    background-color: #f6f6f6;
+    color: #333;
+    text-align: right;
+    line-height: 60px;
+    .header-title{
+      font-size: 20px;
+      position: absolute;
+    }
+    span{
+      margin-right: 15px;
+      font-size: 16px;
+    }
+  }
+  .el-aside {
+    // background-color: #4ca29d;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  .el-main {
+    // background-color: #E9EEF3;
+    color: #333;
+    width: calc(100vw - 200px);
+    // line-height: 160px;
+  }
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+ 
+  .el-menu{
+    height: 100%;
+    padding-top: 40%;
+    box-sizing: border-box;
+  }
+.el-menu-item:focus, .el-menu-item:hover{
+  background-color: #151628;
+}
+.el-submenu__title:focus, .el-submenu__title:hover{
+  background-color: #151628 !important;
+}
+  .el-menu-item{
+    // color: black;
+    font-size:18px;
+  }
+  .el-menu-item.is-active[data-v-fae5bece] {
+    background-color: #151628 !important;
+  }
+  .el-submenu{
+    .submenu_parent{
+      color: #80a0b9;
+    }
+    span{
+      font-size:18px;
+    }
+  }
+  .el-menu-item.is-active {
+    background-color: #151628 !important;
+    span{
+      color: #41afdd !important;
+    }
+  }
+
+ .el-menu[data-v-fae5bece] {
+    background-color: #323346;
+  }
+  .el-menu-item * {
+    color: #80a0b9;
+  }
+  .el-submenu__title{
+    color:#80a0b9;
+  }
+  .el-menu.el-menu--inline{
+    background: #323346;
+  }
+
+
+</style>
+
+<script>
+// @ is an alias to /src
+// import HelloWorld from '@/components/HelloWorld.vue';
+import Cookies from 'js-cookie';
+
+export default {
+  name: 'home',
+  data() {
+    return {
+      myId: '',
+      user: {
+        name: '张三',
+      },
+    };
+  },
+  components: {
+    // HelloWorld,
+  },
+  created() {
+    const myId = Cookies.get('id');
+    this.myId = myId;
+    const username = Cookies.get('username');
+    // console.log(this.$route.params.username);
+    this.user.name = username;
+  },
+  mounted() {
+    if(this.$route.path.replace('/','') == ''){
+      this.goTo('/overview');
+    }
+  },
+  computed:{
+    onRoutes(){
+      // this.$route.path
+      // debugger
+      if(this.$route.path.replace('/','')=='overview'){
+          return '1-1'; 
+      }
+      else if(this.$route.path.replace('/','')=='detail'){
+          return '1-2'
+      }
+      else if(this.$route.path.replace('/','')=='task'){
+          return '2'
+      }
+      else if(this.$route.path.replace('/','')=='result'){
+          return '3-1'
+      }
+      else if(this.$route.path.replace('/','')=='resultDetail'){
+          return '3-2'
+      }
+      else{
+          return '1-1'; 
+      }
+
+    },
+  },
+  methods: {
+    // handleOpen(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+    // handleClose(key, keyPath) {
+    // console.log(key, keyPath);
+    // },
+     // 退出
+    esc() {
+      // alert(1);
+      Cookies.remove('id');
+      this.$router.push({
+        name: 'login',
+      });
+    },
+    goTo(path) {
+      this.$router.replace(path);
+    },
+  },
+};
+</script>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
+<template>
+ <div id="nav">
+    <!-- status-icon:是否在输入框中显示校验结果反馈图标 -->
+    <div class="box">
+    <div class="information">
+      <h1 class="section-title" data-i18n-text="">登录</h1>
+   <el-form class="login-form"  status-icon :rules="loginRules"
+    ref="loginForm" :model="loginForm" label-width="0">
+    <el-form-item prop="username">
+      <el-input
+      @keyup.enter.native="handleLogin"
+      v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名">
+        <i slot="prefix" class="elxingmingyonghumingnicheng"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="password">
+      <el-input
+      @keyup.enter.native="handleLogin"
+      :type="passwordType" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码">
+        <i class="el-icon-view el-input__icon"
+        :style="fontstyle" slot="suffix" @click="showPassword"></i>
+        <i slot="prefix" class="elmima"></i>
+      </el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary"
+      size="small" @click.native.prevent="handleLogin"
+      class="login-submit" name='login'>登录</el-button>
+    </el-form-item>
+  </el-form>
+  </div>
+    <div class="has-text-centered register">
+          <span @click="register">创建一个账户</span>
+        </div>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import { constants } from 'fs';
+import Cookies from 'js-cookie';
+import address from '../config.js';
+
+export default {
+  name: 'userlogin',
+  data() {
+    // 用户名自定义验证规则
+    return {
+      fontstyle: {
+      },
+      loginForm: {
+        username: '',
+        password: '',
+        verifycode: '',
+      },
+      checked: false,
+      identifyCodes: '1234567890',
+      identifyCode: '',
+      loginRules: { // 绑定在form表单中的验证规则
+        username: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+      },
+      passwordType: 'password',
+    };
+  },
+  created() {
+  },
+  mounted() {
+    // 验证码初始化
+    // console.log(address);
+  },
+  computed: {
+  },
+  props: [],
+  methods: {
+    // 跳转到home页
+    goToHome(id, username) {
+      this.$router.push({
+        name: 'home',
+        params: {
+          id,
+          username,
+        },
+      });
+    },
+    // 创建用户
+    register() {
+      this.$router.push(
+        { path: '/registered' },
+      );
+    },
+    // 通过改变input的type使密码可见
+    showPassword() {
+      this.fontstyle === '' ? (this.fontstyle = 'color: red') : (this.fontstyle = ''); // 改变密码可见按钮颜色
+      this.passwordType === ''? (this.passwordType = 'password') : (this.passwordType = '');
+    },
+    // 点击登入按钮
+    handleLogin() {
+      
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          // 路由跳转到任务页面
+          axios.post('/roadlinks/login', {
+            username: this.loginForm.username,
+            password: this.loginForm.password,
+          })
+            .then((response) => {
+              if (response.data.code === 200) {
+                Cookies.set('id', response.data.data.id);
+                Cookies.set('username', this.loginForm.username);
+                Message({
+                  message: `登录${response.data.message}`,
+                  type: 'success',
+                  duration: '800',
+                });
+                setTimeout(() => {
+                  this.goToHome();
+                }, 1000);
+              } else {
+                Message({
+                  message: response.data.message,
+                  type: 'error',
+                });
+              }
+              console.log(response.data);
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// *{
+//   margin: 0;
+//   padding: 0;
+// }
+#nav{
+  width: 100%;
+  height: 100vh;
+  .box{
+      position: absolute;
+    left: 50%;
+    margin-left: -247px;
+    top: 45%;
+    transform: translateY(-50%);
+}
+}
+#nav{
+  background: url('../assets/img/bglogo.jpeg');
+  background-size: 100%;
+}
+.identifybox{
+  display: flex;
+  justify-content: space-between;
+  margin-top:7px;
+}
+.iconstyle{
+  color:#409EFF;
+}
+
+.information{
+  width: 470px;
+  display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: .75rem;
+    border-radius: 12px 12px 0 0;
+    background: #EEEEEE;
+}
+.section-title {
+    border-bottom: 1px solid #ccc;
+    font-size: 28px;
+    padding: 0 0 12px 0;
+    letter-spacing: 2px;
+    user-select: none;
+    color: #555;
+    text-align: center;
+    font-weight: normal;
+    margin: 12px;
+}
+.elxingmingyonghumingnicheng,.elmima{
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.login-form{
+ padding: 10px 40px 0 40px;
+ text-align: center;
+}
+.login-submit{
+    text-align: center;
+   padding: 12px 60px;
+      background-color: rgb(62, 107, 226);
+}
+.login-submit:hover{
+      background-color: rgb(62, 107, 226);
+}
+.register {
+    background: #fff;
+    font-size: 12px;
+    color: #000;
+    width: 470px;
+    padding: 0 12px;
+    height: 42px;
+    border-radius: 0 0 12px 12px;
+    text-align: center;
+    cursor: pointer;
+    span{
+          // display: block;
+    height: 42px;
+    line-height: 42px;
+    color: rgb(62, 107, 226);
+    }
+}
+</style>
--- a/src/views/Overview.vue
+++ b/src/views/Overview.vue
+<template>
+  <div class="overview">
+    <div class="box">
+      <el-row class="warp">
+        <div class="overview-line">淮南管理处道路资产汇总情况如下，总共{{totalnum}}个。</div>
+      <!-- 任务表 -->
+      <div class="overview-table">
+        <el-table
+            :data="tableData"
+            style="width: 99.9%"
+            border=true
+            row-key="id"
+            default-expand-all
+            :cell-style="setUpFont"
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+            highlight-current-row=true
+            >
+            <el-table-column
+              label="序号"
+              width="200"
+              prop="no">
+            </el-table-column>
+            <el-table-column
+              label="道路资产名称"
+              prop="name">
+            </el-table-column>
+            <el-table-column
+              label="资产数量"
+              prop="number">
+            </el-table-column>
+            
+            <el-table-column fixed="right" label="明细" width="200">
+
+              <template slot-scope="scope">
+                <el-button
+                  v-if="scope.row.no != ''"
+                  size="mini"
+                  @click="linkDetail(scope.$index, scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+        </el-table>
+        <!-- <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[5, 10, 20, 40]" 
+              :page-size="pagesize"        
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.length">  
+        </el-pagination> -->
+      </div>
+      
+      <!-- 任务统计 -->
+      <!-- <div class="task-echarts">
+        <h3>任务统计</h3>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div> -->
+       </el-row>
+    </div>
+  </div>
+</template>
+<style lang="less" scope>
+.overview{
+  .box{
+    .overview-line{
+      height: 30px;
+    }
+    .overview-table{}
+  }
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import echarts from 'echarts';
+import moment from 'moment';
+import address from '../config';
+
+export default {
+  name: 'overview',
+  data() {
+    return {
+      tableData: [
+        
+      ],
+      typeData: [
+        {value: 0, label: '全部'},
+        {value: 1, label: '小客车'},
+        {value: 2, label: '大客车'},
+        {value: 3, label: '货车'},
+      ],
+      statusData: [
+        {value: true, label: '启用'},
+        {value: false, label: '未启用'},
+      ],
+      filters: {
+        equipmentNo: '',
+        plateNo: '',
+        channel: '',
+        channelName: '',
+        dateTime: [],
+        type: 0,
+        status: true,
+      },
+      totalnum: 0,
+      showCol: false,
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      equips: [],
+      plateNos: [],
+      channels: [],
+      channelNames: [],
+      currentdate: '',
+      no: 0,
+      tableId: 0,
+    };
+  },
+  mounted() {
+    
+  },
+  created() {
+    // this.getCurrentDate();
+    this.getAllCapitals();
+  },
+  methods: {
+    setUpFont({row,column,rowIndex,columnIndex}){
+      if(row.no == '') {
+        return 'font-weight: 700';
+      }else {
+        return '';
+      }
+    },
+    linkDetail(index, row) {
+      this.$router.push({
+        name:"detail", 
+        params:{
+          capitalName:row.name
+        }
+      })
+    },
+    getCurrentDate() {
+      var date = new Date();
+      var seperator1 = "-";
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      var currentdate = year + seperator1 + month + seperator1 + strDate;
+      this.currentdate = currentdate;
+    },
+    queryEquipSearchAsync(queryString, cb) {
+      var restaurants = this.equips;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    queryPlateSearchAsync(queryString, cb) {
+      var restaurants = this.plateNos;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    queryChannelSearchAsync(queryString, cb) {
+      var restaurants = this.channels;
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        cb(results);
+      }, 3000 * Math.random());
+    },
+    createStateFilter(queryString) {
+      return (state) => {
+        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
+      };
+    },
+    handleEquipSelect(item){
+      if(item && item.value){
+        this.filters.equipmentNo = item.value;
+      }
+    },
+    handlePlateSelect(item){
+      if(item && item.value){
+        this.filters.plateNo = item.value;
+      }
+    },
+    handleChannelSelect(item){
+      if(item && item.channelId){
+        this.filters.channel = item.channelId;
+        this.filters.channelName = item.value;
+      }
+    },
+    // 初始页currentPage、初始每页数据数pagesize和数据data
+    handleSizeChange: function (size) {
+      this.pagesize = size;
+      console.log(this.pagesize)  //每页下拉显示数据
+    },
+    handleCurrentChange: function(currentPage){
+      this.currentPage = currentPage;
+      console.log(this.currentPage)  //点击第几页
+    },
+    getAllCapitals() {
+      
+      axios.post(`/roadlinks/getAllCapitals`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.tableData = [];
+          this.no = 0;
+          this.tableId = 0;
+          if (response.data.data) {
+            console.log(response.data.data);
+            let capitals = response.data.data.capitals;
+            this.totalnum = capitals.length;
+            let capitalTypeMap = new Map();
+            let capitalNameMap = new Map();
+            let relationMap = new Map();
+            capitals.forEach((val) => {
+              //资产类型数量统计
+              if(val.capitalType){
+                if(capitalTypeMap.has(val.capitalType.trim())){
+                  capitalTypeMap.set(val.capitalType.trim(), capitalTypeMap.get(val.capitalType.trim()) + 1);
+                }else{
+                  capitalTypeMap.set(val.capitalType.trim(), 1);
+                }
+              }
+              if(val.capitalName){
+                //资产名称数量统计
+                if(capitalNameMap.has(val.capitalName)){
+                  capitalNameMap.set(val.capitalName, capitalNameMap.get(val.capitalName) + 1);
+                }else{
+                  capitalNameMap.set(val.capitalName, 1);
+                }
+              }
+              //类型和名称关联关系
+              if(relationMap.has(val.capitalType)){
+                let nameSet = relationMap.get(val.capitalType);
+                if(val.capitalName){
+                  nameSet.add(val.capitalName);
+                }
+                relationMap.set(val.capitalType, nameSet);
+              } else {
+                let nameSet = new Set();
+                if(val.capitalName){
+                  nameSet.add(val.capitalName);
+                }
+                relationMap.set(val.capitalType, nameSet);
+              }
+              
+            });
+            for(let [key,value] of capitalTypeMap){
+                let tableItem = {id: ++this.tableId, no: '', name: key, number: value, children: []};
+                let nameSet = relationMap.get(key);
+                if(nameSet){
+                  nameSet.forEach((cpname) => {
+                    tableItem.children.push({id: ++this.tableId, no: ++this.no, name: cpname, number: capitalNameMap.get(cpname)});
+                  })
+                }
+                this.tableData.push(tableItem);
+            }
+            console.log(this.tableData);
+          }
+        } else {
+          
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    isInArray(arr,value){
+	    for(var i = 0; i < arr.length; i++){
+	        if(value === arr[i]){
+	            return true;
+	        }
+	    }
+	    return false;
+	  },
+    queryEquipment() {
+      if(this.filters.channelName){
+        if(this.channelNames.length > 0 && this.isInArray(this.channelNames,this.filters.channelName)){
+          this.channels.forEach((val) => {
+            if(val && val.value == this.filters.channelName){
+              this.filters.channel = val.channelId;
+            }
+          });
+        }else{
+          this.filters.channel = -99;
+        }
+      }else{
+        this.filters.channel = '';
+      }
+
+      axios.post(`/roadlinks/getAllEquipments`, {
+        code: this.filters.equipmentNo,
+        channelId: this.filters.channel,
+        plateNo: this.filters.plateNo,
+        type: this.filters.type,
+        status: this.filters.status,
+        startTime: this.filters.dateTime && this.filters.dateTime.length > 0 ? this.filters.dateTime[0] : null,
+        endTime: this.filters.dateTime && this.filters.dateTime.length > 1 ? this.filters.dateTime[1] : null
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            response.data.data.forEach((item) => {
+              item.status = (item.status ? '启用' : '未启用');
+              item.type = item.type == 1 ? '小客车' : (item.type == 2 ? '大客车' : (item.type == 3 ? '货车' : ''));
+              item.finalOnlineTime = item.finalOnlineTime ? moment(new Date(item.finalOnlineTime)).format("YYYY-MM-DD") : '';
+            });
+          }
+          this.tableData = response.data.data;
+        } else {
+          this.tableData = [];
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    
+  },
+};
+</script>
--- a/src/views/Registered.vue
+++ b/src/views/Registered.vue
+<template>
+  <div class="registered">
+    <div class="wrap">
+      <div class="has-text-centered signin">
+        <span>已有账户？</span> <i @click="goToLogin">登录</i>
+      </div>
+      <div class="formBody">
+        <h1 class="section-title" data-i18n-text="">创建用户</h1>
+    <el-form :model="ruleForm2"
+    status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="用户名" prop="user">
+    <el-input  v-model="ruleForm2.user"></el-input>
+  </el-form-item>
+  <el-form-item label="密码" prop="pass">
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="确认密码" prop="checkPass">
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
+  </el-form-item>
+  <el-form-item label="电子邮箱" prop="mailAddress">
+        <el-input placeholder="请填写邮箱地址" v-model="ruleForm2.mailAddress" @blur="sendEmail"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('ruleForm2')" class="newUser">创建用户</el-button>
+    <el-button @click="resetForm('ruleForm2')" class="reset">重置</el-button>
+  </el-form-item>
+</el-form>
+
+</div>
+</div>
+
+</div>
+</template>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import { setTimeout } from 'timers';
+import address from '../config.js';
+
+export default {
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'));
+      } else {
+        if (this.ruleForm2.checkPass !== '') {
+          this.$refs.ruleForm2.validateField('checkPass');
+        }
+        callback();
+      }
+    };
+    const validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.ruleForm2.pass) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      ruleForm2: {
+        pass: '',
+        checkPass: '',
+        user: '',
+        mailAddress: '',
+      },
+      rules2: {
+        pass: [
+          { validator: validatePass, trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+        checkPass: [
+          { validator: validatePass2, trigger: 'blur' },
+          { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
+        ],
+        user: [
+          { required: true, message: '请输入用户名', trigger: 'blur' },
+        ],
+        mailAddress: [
+          { required: true, message: '请填写电子邮箱', trigger: 'blur' },
+        ],
+      },
+    };
+  },
+  methods: {
+    sendEmail() {
+      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+      if (this.ruleForm2.mailAddress != '' && !regEmail.test(this.ruleForm2.mailAddress)) {
+          this.$message({
+              message: '邮箱格式不正确',
+              type: 'error'
+          })
+          this.ruleForm2.mailAddress = ''
+      }
+    },
+    // 创建用户
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.ruleForm2.user + this.ruleForm2.pass);
+          axios.post('/roadlinks/register', {
+            username: this.ruleForm2.user,
+            password: this.ruleForm2.pass,
+            email: this.ruleForm2.mailAddress,
+            status: 1,
+          })
+            .then((response) => {
+              if (response.data.code === 200) {
+                Message({
+                  message: response.data.data,
+                  type: 'success',
+                  duration: '500',
+                });
+                setTimeout(() => {
+                  this.goToLogin();
+                }, 1000);
+              } else {
+                Message({
+                  message: response.data.message,
+                  type: 'error',
+                });
+              }
+              console.log(response.data);
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 重置
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    // 返回登录页面
+    goToLogin() {
+      this.$router.push(
+        { path: '/login' },
+      );
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+
+.registered{
+  height: 100vh;
+  background: url('../assets/img/regist.jpeg');
+  background-size: 100% 100%;
+  .wrap{
+    width: 570px;
+        position: absolute;
+    left: 45%;
+    margin-left: -285px;
+    top: 50%;
+    transform: translateY(-50%);
+    .signin {
+    background: #fff;
+    height: 42px;
+    line-height: 42px;
+    font-size: 12px;
+    color: #555;
+    border-radius: 12px 12px 0 0;
+    i{
+      color: rgb(62, 107, 226);
+      cursor: pointer;
+    }
+}
+.has-text-centered {
+    text-align: center;
+}
+.formBody{
+  .section-title {
+    border-bottom: 1px solid #ccc;
+    font-size: 28px;
+    padding: 0 0 12px 0;
+    letter-spacing: 2px;
+    user-select: none;
+    color: #555;
+    text-align: center;
+    font-weight: normal;
+    margin: 12px;
+}
+  padding: 10px 40px 40px 40px;
+    background: #eee;
+    border-radius: 0 0 12px 12px;
+    .newUser{
+      padding: 12px 30px;
+    background-color: #3e6be2;
+    }
+    .reset{
+      padding: 12px 30px;
+    }
+}
+  }
+}
+</style>
--- a/src/views/Result.vue
+++ b/src/views/Result.vue
+<template>
+  <div class="result" ref="result">
+    <div class="box">
+      <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.plateNo"
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="车牌号"
+                    >
+                    <el-option
+                      v-for="item in plateNoOptions"
+                      :key="item.code"
+                      :label="item.plateNo"
+                      :value="item.code">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-date-picker
+                    v-model="filters.dateTime"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="['00:00:00', '23:59:59']"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="queryTravel">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="exportTravel">导出结果</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+       <!-- 任务表 -->
+      <div class="task-table">
+        <el-table
+            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+            style="width: calc(100vw - 240px);overflow:hidden;"
+            border=true
+            fit
+            highlight-current-row=true
+            >
+            <el-table-column
+              type="index"
+              width="50"
+              label="序号">
+            </el-table-column>
+            <el-table-column
+              label="车牌号"
+              prop="plateNo">
+            </el-table-column>
+            <el-table-column
+              label="起始时间 - 终止时间"
+              prop="startEndTime">
+            </el-table-column>
+            <el-table-column
+              label="起点 - 终点"
+              prop="startEndPoint">
+            </el-table-column>
+            <el-table-column
+              label="巡检里程"
+              prop="inspectDistance">
+            </el-table-column>
+            <el-table-column
+              label="巡检资产"
+              prop="inspectNum">
+            </el-table-column>
+            <el-table-column
+              label="正常资产"
+              width="80"
+              prop="normalNum">
+            </el-table-column>
+            <el-table-column
+              label="路面抛洒物"
+              prop="roadLetterNum">
+            </el-table-column>
+            <el-table-column
+              label="护栏弯曲"
+              prop="guardrailNum">
+            </el-table-column>
+            <el-table-column
+              label="新增资产"
+              prop="newInspectNum">
+            </el-table-column>
+            <el-table-column
+              v-if="isShowCol"
+              label="起始时间戳"
+              prop="startTime">
+            </el-table-column>
+            <el-table-column
+              v-if="isShowCol"
+              label="终止时间戳"
+              prop="endTime">
+            </el-table-column>
+            <el-table-column fixed="right" label="详情" >
+
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  @click="linkDetail(scope.$index, scope.row)">查看</el-button>
+              </template>
+            </el-table-column>
+          
+          </el-table>
+          <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[5, 10, 20, 40]" 
+              :page-size="pagesize"        
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.length">  
+        </el-pagination>
+      </div>
+      <!-- 地图 -->
+      <div class="ov-map">
+          <baidu-map class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" scroll-wheel-zoom @dragend="getMapBounds" @ready="handler">
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+              <!-- <bm-polyline :path="item.polylinePath" stroke-color="orange" :stroke-opacity="1" :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
+              </bm-polyline> -->
+              <bml-marker-clusterer :averageCenter="true">
+                <div v-for="(item,index) in carPoints" :key="item"> 
+                  <bm-marker :zIndex="5" :position="{lng: item.lng, lat: item.lat}" :title="item.title" :offset="{width: 0, height: -16}" :icon="{url: item.url, size: {width: 32, height: 32}}" :animation="item.markerAnim" @mouseover="addclass(index)" @mouseout="removeclass(index)" @click="showPicture(index)">
+                    <bm-label :content="item.content" :zIndex="10" :position="{lng: item.lng, lat: item.lat}" :offset="{width: 8, height: 0}" :labelStyle="{color: 'white', border: 0, backgroundColor: 'transparent', fontSize : '14px'}"/>
+                  </bm-marker>
+                </div>
+              </bml-marker-clusterer>
+            
+            
+            <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
+          </baidu-map>
+       
+      </div>
+      <!-- 图片 -->
+      <div class="picture">
+        <!-- <el-button type="primary" @click="exportImgInfo">导出</el-button> -->
+        <ul>
+          <li v-for="(item,index) in imgs" :key="item" style="padding: 5px;" @mouseover="addActive(index)" @mouseout="removeActive(index)" @click="showPicture(index)">
+            <el-card :id="item.id" :body-style="{ padding: '0px' }" :class="{pic_active:index == isShow}">
+              <!-- <img :src="item.url" alt="#"> -->
+              <el-image :src="item.url" lazy></el-image>
+              <span class="number">{{item.number}}</span>
+              <div style="padding: 14px;">
+                <span v-html="item.content"></span>
+              </div>
+            </el-card>
+          </li>
+        </ul>
+      </div>
+    </div>
+    
+    <el-dialog
+        :visible.sync="isShowPicture"
+        :title="imgContent"
+        custom-class="customWidth"
+        >
+        <div :style="'height:' + fullHeight + 'px;'">
+          <img :src="bigImgUrl" width="100%" style="height: 100%;">
+        <div>
+    </el-dialog>
+  </div>
+</template>
+<style lang="less" scope>
+.BMapLabel{
+  z-index: 10 !important;
+}
+.customWidth{
+  width: 63%
+}
+.sample {
+  width: 120px;
+  height: 40px;
+  line-height: 40px;
+  background: rgba(0,0,0,0.5);
+  overflow: hidden;
+  box-shadow: 0 0 5px #000;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+  position: absolute;
+}
+.anchorBL{display:none}
+.result{
+  height: 100%;
+  width: calc(100vw - 240px);
+  .box{
+    height: 100%;
+    width: calc(100vw - 240px);
+    float: left;
+    .el-col-24 {
+        width: 100%;
+        background-color: white;
+    }
+    .ov-map{
+      width: calc(100vw - 600px);
+      height: 100%;
+      float: left;
+      background: #888
+    }
+    .picture{
+      height: 90%;
+      width: calc(300px);
+      float: left;
+      .el-button--primary {
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        margin-left: 64%;
+        margin-bottom: 5%;
+      }
+      ul{
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+        margin: 0 auto;
+        margin-left: 10%;
+        li{
+          width: 80%;
+          height: auto;
+          float: left;
+          text-align: center;
+          .el-card{
+            position: relative;
+            img{
+              width: 100%;
+              height: 80%;
+            }
+            .number{
+              position: absolute;
+              left: 0;
+              top: 0;
+              background-color: SlateGray;
+              color: #fff;
+              line-height: 23px;
+              width: 23px;
+              border-radius: 24px;
+              text-align: center;
+              font-size: 17px;
+            }
+          }
+        }
+      }
+    }
+  }  
+  
+}
+.pic_active{
+  border: 5px solid #1296db;
+}
+.map {
+  width: calc(100vw - 600px);
+  height: 100%;
+}
+</style>
+
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import gcoord from 'gcoord';
+import moment from 'moment';
+import address from '../config';
+import { export_json_to_excel } from '@/excel/Export2Excel'
+
+export default {
+  name: 'result',
+  data() {
+    return {
+      options: [{value:0,label:'全国'}],
+      zoom: 13,
+      tableData: [],
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      carPoints: [
+        
+      ],
+      allPoints: [],
+      imgs: [
+        
+      ],
+      filters: {
+        plateNo: [],
+        dateTime: []
+      },
+      plateNoOptions: [],
+      allImgs: [],
+      isShow: -1,
+      points: [],
+      value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+      center: {lng: 116.30249408783744, lat: 39.23017874638128},
+      minSpeed: null,
+      maxSpeed: null,
+      distance: null,
+      no: 0,
+      isShowCol: false,
+      isShowPicture: false,
+      bigImgUrl: '',
+      imgContent: '',
+      fullHeight: document.documentElement.clientHeight/1.5,
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          },
+        }],
+      }, 
+      capitalOptions: [
+        {
+          label: '路面状况',
+          value: 1
+        }, {
+          label: '护栏',
+          value: 2
+        },
+        {
+          label: '龙门架',
+          value: 101
+        }, {
+          label: '矩形标牌',
+          value: 201
+        }, {
+          label: '圆形标牌',
+          value: 202
+        }, {
+          label: '三角标牌',
+          value: 203
+        }, {
+          label: '其它形状标牌',
+          value: 209
+        }, {
+          label: '可变信息牌（情报板）',
+          value: 301
+        }, {
+          label: 'T型杆',
+          value: 401
+        }, {
+          label: 'L型杆',
+          value: 402
+        }, {
+          label: 'I型立杆',
+          value: 403
+        }, {
+          label: '枪式摄像机',
+          value: 801
+        }, {
+          label: '相机',
+          value: 802
+        }, {
+          label: '补光灯',
+          value: 803
+        },  {
+          label: 'RSU天线',
+          value: 804
+        }, {
+          label: '测速雷达',
+          value: 805
+        }
+      ]
+    };
+  },
+  mounted() {
+    let searchVal = sessionStorage.getItem("searchVal");
+    if (searchVal) {
+      this.filters = JSON.parse(searchVal);
+    }
+    this.queryAllEquipment();
+    this.queryTravel();
+  },
+  updated() {
+    window.scroll(0, 0);
+  },
+ 
+  methods: {
+    getMapBounds(e){
+      var bounds = e.target.getBounds();
+      
+      this.carPoints = [];
+      this.imgs = [];
+      this.allPoints.forEach((item,index) => {
+        var point = new BMap.Point(item.lng, item.lat);
+        if(bounds.containsPoint(point)) {
+          if(index <= 100) {
+            this.carPoints.push(item);
+            this.imgs.push(this.allImgs[index]);
+          }
+        }
+      });
+      if(this.carPoints.length > 0) {
+        this.center.lng = this.carPoints[0].lng;
+        this.center.lat = this.carPoints[0].lat;
+        this.carPoints.forEach((val) => {
+          val.title = val.titleList.join('\n');
+        });
+      }
+      
+    },
+    exportTravel(){
+        this.tableData.forEach((item, index) => {
+          item.no = index + 1 + '';
+        })
+        require.ensure([], () => {
+            //tHeader为存放excel表头标题的数组
+            const tHeader = ["序号","车牌号","起始时间 - 终止时间","起点 - 终点","巡检里程","巡检资产","正常资产","路面抛洒物","护栏弯曲","新增资产"];
+            //filterVal为tHeader标题对应的键值
+            const filterVal = ["no","plateNo","startEndTime","startEndPoint","inspectDistance","inspectNum","normalNum","roadLetterNum","guardrailNum","newInspectNum"];
+            //list为要转化为excel文件的数据，是一个数组
+            const list = this.tableData;
+            //用map方法处理list数据
+            const data =list.map(v => filterVal.map(j => v[j]));
+            //自定义excel文件名
+            const fileName="巡检结果";
+            export_json_to_excel(tHeader, data,fileName);
+        });
+    },
+    exportImgInfo(){
+      let exportImgs = [];
+      this.allImgs.forEach((item) => {
+        let capital = item.content.split('|');
+        exportImgs.push({number: item.number + '', url: address + item.url.split("=")[1], capitalName: capital[0], capitalStatus: capital[1], position: capital[2]});
+      });
+        require.ensure([], () => {
+            //tHeader为存放excel表头标题的数组
+            const tHeader = ["图片编号","图片链接","资产名称","资产状态","资产位置"];
+            //filterVal为tHeader标题对应的键值
+            const filterVal = ["number","url","capitalName","capitalStatus","position"];
+            //list为要转化为excel文件的数据，是一个数组
+            const list = exportImgs;
+            //用map方法处理list数据
+            const data =list.map(v => filterVal.map(j => v[j]));
+            //自定义excel文件名
+            const fileName="资产图片信息";
+            export_json_to_excel(tHeader, data,fileName);
+        });
+    },
+    addclass(index) {
+      document.getElementById(this.imgs[index].id).scrollIntoView();
+      this.carPoints.forEach((val, index_) => {
+        if (index_ === index) {
+          val.url = val.status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+        }else{
+          val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+        }
+      });
+      this.isShow = index;
+
+    },
+    removeclass(index) {
+      this.carPoints.forEach((val) => {
+        val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+      });
+      this.isShow = -1;
+    },
+    showPicture(index){
+      this.bigImgUrl = this.imgs[index].url;
+      this.isShowPicture = true;
+      this.imgContent = this.imgs[index].content;
+    },
+    addActive(index) {
+      this.carPoints.forEach((val) => {
+        val.markerAnim = '';
+        val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+      });
+      this.isShow = index;
+      this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
+      this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
+    },
+    removeActive(index) {
+      this.isShow = -1;
+      this.carPoints[index].markerAnim = '';
+      this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
+    },
+    handler({BMap, map}) {
+      console.log(BMap, map);
+    },
+    updatePolylinePath(e) {
+      this.polylinePath = e.target.getPath();
+    },
+    changeBefore() {
+    },
+    zoomEnd(e) {
+      this.zoom = e.target.getZoom();
+      this.getMapBounds(e);
+    },
+    queryAllEquipment() {
+      axios.post(`/roadlinks/queryAllEquipment`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.plateNoOptions = [];
+            response.data.data.forEach((item) => {
+              this.plateNoOptions.push(item);
+            });
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    queryTravel() {
+      sessionStorage.setItem("searchVal", JSON.stringify(this.filters));
+      if(this.filters.dateTime.length == 0){
+        this.filters.dateTime = [moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00', moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59'];
+      }
+      let equipmentCode = "";
+      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+        this.filters.plateNo.forEach((item) => {
+          if(equipmentCode == ""){
+            equipmentCode += item;
+          }else{
+            equipmentCode += "," + item;
+          }
+        });
+      }
+      
+      axios.post(`/roadlinks/getInspectResult`, {
+        startTime: this.filters.dateTime[0],
+        endTime: this.filters.dateTime[1],
+        equipment: equipmentCode
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.tableData = [];
+            this.allPoints = [];
+            this.carPoints = [];
+            this.imgs = [];
+            this.allImgs = [];
+            this.no = 0;
+            
+            for(var key in response.data.data) {
+              if(response.data.data[key]){
+                let gisArr = response.data.data[key];
+                gisArr.forEach((val) => {
+                  if(val){
+                    //计算轨迹长度
+                    let points = [];
+                    let startPoints = [];
+                    let endPoints = [];
+                    let totalDistance = 0;
+                    val.forEach((item,index) => {
+                      if(item.longitude && item.latitude){
+                        
+                        if(item.images) {
+                          //资产及对应图片信息
+                          item.images.forEach((info) => {
+                            this.no = ++this.no;
+                            if(info.longitude && info.latitude) {
+                              const result = gcoord.transform(
+                                [info.longitude, info.latitude],
+                                gcoord.WGS84,
+                                gcoord.BD09,
+                              );
+                              this.capitalOptions.forEach((capital) => {
+                                if(capital.value == info.type2) {
+                                  info.type2 = capital.label;
+                                }
+                              });
+                              this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: ['资产类型:' + info.type2,'资产状态:' + info.status == 1 ? '正常' : '异常', '位置:' + info.position]});
+                              this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.type2 + ' | ' + (info.status == 1 ? '正常' : '异常') + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no});
+                            }
+                          });
+                        }
+                        if(index < val.length - 1){
+                          if(val[index+1].longitude && val[index+1].latitude){
+                            const result1 = gcoord.transform(
+                              [val[index+1].longitude, val[index+1].latitude],
+                              gcoord.WGS84,
+                              gcoord.BD09,
+                            );
+                            const result = gcoord.transform(
+                              [val[index].longitude, val[index].latitude],
+                              gcoord.WGS84,
+                              gcoord.BD09,
+                            );
+                            if(val[index + 1].linkId == val[index].linkId){
+                              totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
+                            }else{
+                              totalDistance += Math.abs(this.getDistance(result1[0],result1[1],result[0],result[1]));
+                            }
+                          }
+                        }
+                      }
+                      
+                    });
+                    
+                    this.tableData.push({
+                      plateNo: key, 
+                      startEndTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm:ss") + " - " + moment(val[0].timestamp).format("YYYY-MM-DD hh:mm:ss"), 
+                      startEndPoint: val[val.length - 1].position + " - " + val[0].position,
+                      inspectDistance: (totalDistance/1000).toFixed(1) + 'km',
+                      inspectNum: (val[0].inspectNum ? val[0].inspectNum : 0) + "个",
+                      normalNum: (val[0].normalNum ? val[0].normalNum : 0) + "个",
+                      roadLetterNum: (val[0].roadLetterNum ? val[0].roadLetterNum : 0) + "个",
+                      guardrailNum: (val[0].guardrailNum ? val[0].guardrailNum : 0) + "个",
+                      newInspectNum: (val[0].newInspectNum ? val[0].newInspectNum : 0) + "个",
+                      startTime: val[val.length - 1].timestamp,
+                      endTime: val[0].timestamp
+                    });
+                    
+                  }
+                });
+              }
+            }
+            this.allPoints.forEach((item, index) => {
+              if(index <= 100){
+                this.carPoints.push(item);
+                this.imgs.push(this.allImgs[index]);
+              }
+            });
+            if(this.carPoints && this.carPoints.length > 0){
+              // this.center.lng = '117.05089715211';
+              // this.center.lat = '32.50339615603';
+              this.center.lng = this.carPoints[0].lng;
+              this.center.lat = this.carPoints[0].lat;
+              this.carPoints.forEach((val) => {
+                val.title = val.titleList.join('\n');
+              });
+            }
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getDistance(lng1,lat1,lng2,lat2) {
+      let EARTH_RADIUS = 6378.137;
+      let radLat1 = this.rad(lat1);    
+      let radLat2 = this.rad(lat2);  
+      let a = radLat1 - radLat2;
+      let b = this.rad(lng1) - this.rad(lng2);    
+      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)    
+              + Math.cos(radLat1) * Math.cos(radLat2)    
+              * Math.pow(Math.sin(b / 2), 2)));    
+      s = s * EARTH_RADIUS;
+      //s = Math.round(s * 10000d) / 10000d;
+      s = Math.round(s * 10000) / 10000;
+      s = s*1000;    //乘以1000是换算成米
+      return s;
+    },
+    rad(d){
+        return d * Math.PI / 180.0;    
+    },
+    linkDetail(index, row) {
+      let startEndTime = row.startTime;
+      console.log(row.startTime);
+      console.log(row.endTime);
+      this.$router.push({
+            name:"resultDetail",
+            params: {
+              startTime: row.startTime,
+              endTime: row.endTime,
+              equipment: row.plateNo
+            }
+      });
+    },
+    getCapitals() {
+      this.no = 0;
+      let capitalName = '';
+      if(this.filters.capitalType){
+        this.filters.capitalType.forEach((val) => {
+          if(capitalName === '') {
+            capitalName = capitalName + val;
+          } else {
+            capitalName = capitalName + ',' + val;
+          }
+        });
+      }
+      axios.post(`/roadlinks/getCapitalDetails`, {
+        capitalName: capitalName
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.carPoints = [];
+          this.imgs = [];
+          this.allPoints= [];
+          this.allImgs = [];
+          if (response.data.data) {
+            let capitals = response.data.data;
+            capitals.forEach((val) => {
+              if(val.lng && val.lat){
+                const result = gcoord.transform(
+                  [val.lng, val.lat],
+                  gcoord.WGS84,
+                  gcoord.BD09,
+                );
+                this.no = ++this.no;
+                this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: require('../assets/img/map-marker_orange.png'), content: this.no, title: '', titleList: ['资产类型:' + val.capitalType,'资产名称:' + val.capitalName ,'资产状态:正常', '位置:' + val.position]});
+                this.allImgs.push({url: '/roadlinks/getCapitalImg?imgName=' + val.imgName, content: val.capitalName + ' | 正常 | ' + val.position, number: this.no ,id: 'imageCard' + this.no});
+              }
+              
+            });
+            this.allPoints.forEach((item, index) => {
+              if(index <= 100){
+                this.carPoints.push(item);
+                this.imgs.push(this.allImgs[index]);
+              }
+            });
+            if(this.carPoints && this.carPoints.length > 0){
+              this.center.lng = '117.05089715211';
+              this.center.lat = '32.50339615603';
+              this.carPoints.forEach((val) => {
+                val.title = val.titleList.join('\n');
+              });
+            }
+          }
+        } else {
+          this.allPoints = [];
+          this.carPoints = [];
+          this.imgs = [];
+          this.allImgs = [];
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    onSubmit() {
+      if (!this.form.region) {
+        Message({
+          message: '请输入地域',
+          type: 'error',
+        });
+        return;
+      }
+      if (!this.form.registration) {
+        Message({
+          message: '请先选择道路等级',
+          type: 'error',
+        });
+        return;
+      }
+      if (!this.form.minSpeed) {
+        Message({
+          message: '请先填写最小速度',
+          type: 'error',
+        });
+        return;
+      }
+      if (!this.form.maxSpeed) {
+        Message({
+          message: '请先填写最大速度',
+          type: 'error',
+        });
+        return;
+      }
+      if (!this.value4) {
+        Message({
+          message: '请先选择时间',
+          type: 'error',
+        });
+        return;
+      }
+      console.log(this.form.registration);
+      let level = "";
+      this.form.registration.forEach((item,index) => {
+        if(index == 0){
+          level += item;
+        }else{
+          level += "," + item;
+        }
+      });
+      axios.post(`/roadlinks/generateTask`, {
+        area: this.form.region,
+        startTime: this.value4[0],
+        endTime: this.value4[1],
+        minSpeed: this.form.minSpeed,
+        maxSpeed: this.form.maxSpeed,
+        level: level,
+        distance: this.form.distance,
+      }).then((response) => {
+        if (response.data.code === 200) {
+          Message({
+            message: `${response.data.message}`,
+            type: 'success',
+            duration: '800',
+          });
+        } else {
+          Message({
+            message: `${response.data.message}`,
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    listPicture() {
+      window.open('http://106.52.130.113:9088','_blank');
+    },
+    changeevent(value) {
+      this.options.forEach((item) => {
+        if(value == item.value){
+          this.center = item.label;
+        }
+      });
+    },
+  },
+};
+</script>
--- a/src/views/ResultDetail.vue
+++ b/src/views/ResultDetail.vue
+<template>
+  <div class="detail">
+    <div class="box">
+       
+         <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.capitalType"
+                    collapse-tags
+                    clearable 
+                    filterable
+                    placeholder="巡检目标"
+                    >
+                    <el-option
+                      v-for="item in capitalOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-select
+                    v-model="filters.status"
+                    collapse-tags
+                    clearable 
+                    filterable
+                    placeholder="目标状态"
+                    >
+                    <el-option
+                      v-for="item in statusOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-date-picker
+                    v-model="filters.dateTime"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="['00:00:00', '23:59:59']"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="getImageGroups">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="exportTravel">导出</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+       <!-- 任务表 -->
+      <div class="detail-table">
+ <el-table
+    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    style="width: calc(100vw - 240px);overflow:hidden;"
+    border=true
+    fit
+    highlight-current-row=true
+    >
+    <el-table-column
+      type="index"
+      label="序号"
+      width="50"
+      >
+    </el-table-column>
+    <el-table-column
+      label="巡检时间"
+      prop="imageTime">
+    </el-table-column>
+    <el-table-column
+      label="巡检目标"
+      prop="type2">
+    </el-table-column>
+    <el-table-column
+      label="目标位置"
+      prop="position">
+    </el-table-column>
+    <el-table-column
+      label="目标状态"
+      prop="status">
+    </el-table-column>
+    <el-table-column
+      v-if="isShowCol"
+      label="图片路径"
+      prop="imagePath">
+    </el-table-column>
+    <el-table-column fixed="right" label="详情">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="showPicture(scope.$index, scope.row)">查看</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20, 40]" 
+        :page-size="pagesize"        
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">  
+  </el-pagination>
+      </div>
+      
+      <!-- 任务统计 -->
+      <!-- <div class="task-echarts">
+        <h3>任务统计</h3>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div> -->
+       
+    </div>
+    <el-dialog
+        :visible.sync="isShowPicture"
+        :title="imgContent"
+        custom-class="customWidth"
+        >
+        <div :style="'height:' + fullHeight + 'px;'">
+          <img :src="bigImgUrl" width="100%" style="height: 100%;">
+        <div>
+    </el-dialog>
+  </div>
+</template>
+<style lang="less" scope>
+.detail{
+  .box{
+    width: calc(100vw - 240px);
+    .el-pagination{
+      padding: 15px;
+    }
+  }
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import echarts from 'echarts';
+import moment from 'moment';
+import address from '../config';
+import { export_json_to_excel } from '@/excel/Export2Excel'
+
+export default {
+  name: 'detail',
+  data() {
+    return {
+      tableData: [
+        
+      ],
+      filters: {
+        capitalType: '',
+        status: null,
+        dateTime: []
+      },
+      
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      loading: false,
+      isShowCol: false,
+      isShowPicture: false,
+      imgContent: '',
+      bigImgUrl: '',
+      no: 0,
+      capitalOptions: [
+        {
+          label: '路面状况',
+          value: 1
+        }, {
+          label: '护栏',
+          value: 2
+        },
+        {
+          label: '龙门架',
+          value: 101
+        }, {
+          label: '矩形标牌',
+          value: 201
+        }, {
+          label: '圆形标牌',
+          value: 202
+        }, {
+          label: '三角标牌',
+          value: 203
+        }, {
+          label: '其它形状标牌',
+          value: 209
+        }, {
+          label: '可变信息牌（情报板）',
+          value: 301
+        }, {
+          label: 'T型杆',
+          value: 401
+        }, {
+          label: 'L型杆',
+          value: 402
+        }, {
+          label: 'I型立杆',
+          value: 403
+        }, {
+          label: '枪式摄像机',
+          value: 801
+        }, {
+          label: '相机',
+          value: 802
+        }, {
+          label: '补光灯',
+          value: 803
+        },  {
+          label: 'RSU天线',
+          value: 804
+        }, {
+          label: '测速雷达',
+          value: 805
+        }
+      ],
+      statusOptions: [
+        {
+          label: '全部',
+          value: -1
+        },
+        {
+          label: '正常',
+          value: 1
+        },  {
+          label: '异常',
+          value: 2
+        }, {
+          label: '新增',
+          value: 3
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          },
+        }],
+      },
+      currentdate: '',
+      fullHeight: document.documentElement.clientHeight/1.5,
+    };
+  },
+  mounted() {
+    
+  },
+  created() {
+    let startTime = null;
+    let endTime = null;
+    let equipment = null
+    if(this.$route.params.startTime){
+      startTime = this.$route.params.startTime;
+    }
+    if(this.$route.params.endTime){
+      endTime = this.$route.params.endTime;
+    }
+    if(this.$route.params.equipment){
+      equipment = this.$route.params.equipment;
+    }
+    if (startTime || endTime || equipment) {
+      this.filters.dateTime = [moment(startTime).format("YYYY-MM-DD HH:mm:ss"), moment(endTime).format("YYYY-MM-DD HH:mm:ss")];
+      this.getImageGroupsByCon(startTime, endTime, equipment);
+    } else {
+      this.filters.status = 2;
+      this.getImageGroups();
+    }
+    
+  },
+  methods: {
+    getImageGroupsByCon(startTime, endTime, equipment) {
+      axios.post(`/roadlinks/getImageGroupsByCon`, {
+        startTimeMill: startTime,
+        endTimeMill: endTime,
+        equipment: equipment
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            response.data.data.forEach((val) => {
+              val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
+              val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS");
+              this.capitalOptions.forEach((item) => {
+                if(item.value == val.type2) {
+                  val.type2 = item.label;
+                }
+              });
+            });
+            this.tableData = response.data.data;
+          } else {
+            this.tableData = [];
+          }
+        } else {
+          this.tableData = [];
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getImageGroups() {
+      if(this.filters.dateTime.length == 0){
+        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
+        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
+      }
+      axios.post(`/roadlinks/getImageGroups`, {
+        beginTime: this.filters.dateTime[0],
+        endTime: this.filters.dateTime[1],
+        capitalType: this.filters.capitalType,
+        status: this.filters.status > 0 ? this.filters.status : null
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            response.data.data.forEach((val) => {
+              val.status = val.status == 1 ? '正常' : (val.status == 2 ? '异常' : '新增');
+              val.imageTime = moment(parseInt(val.imageTime)).format("YYYY-MM-DD HH:MM:SS");
+              this.capitalOptions.forEach((item) => {
+                if(item.value == val.type2) {
+                  val.type2 = item.label;
+                }
+              });
+            });
+            this.tableData = response.data.data;
+          } else {
+            this.tableData = [];
+          }
+        } else {
+          this.tableData = [];
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getCurrentDate() {
+      var date = new Date();
+      var seperator1 = "-";
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      var currentdate = year + seperator1 + month + seperator1 + strDate;
+      this.currentdate = currentdate;
+    },
+    
+    // 初始页currentPage、初始每页数据数pagesize和数据data
+    handleSizeChange: function (size) {
+      this.pagesize = size;
+      console.log(this.pagesize)  //每页下拉显示数据
+    },
+    handleCurrentChange: function(currentPage){
+      this.currentPage = currentPage;
+      console.log(this.currentPage)  //点击第几页
+    },
+    getAllCapitals() {
+      axios.post(`/roadlinks/getAllCapitals`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.capitalOptions = [];
+          if (response.data.data) {
+            console.log(response.data.data);
+            let capitals = response.data.data.capitals;
+            let nameSet = new Set();
+            capitals.forEach((val) => {
+              nameSet.add(val.capitalName);
+            });
+            nameSet.forEach((item) => {
+              if(item) {
+                this.capitalOptions.push({value: item, label: item});
+              }
+            })
+          }
+        } else {
+          
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getCapitalDetails() {
+      this.currentPage = 1;
+      let capitalName = '';
+      if(this.filters.capitalType){
+        this.filters.capitalType.forEach((val) => {
+          if(capitalName === '') {
+            capitalName = capitalName + val;
+          } else {
+            capitalName = capitalName + ',' + val;
+          }
+        });
+      }
+      axios.post(`/roadlinks/getCapitalDetails`, {
+        capitalName: capitalName
+      }).then((response) => {
+        if (response.data.code === 200) {
+          this.tableData = [];
+          this.no = 0;
+          if (response.data.data) {
+            let nameMap = new Map();
+            response.data.data.forEach((val) => {
+              if(val.lng && val.lat){
+                //nameSet.add(val.capitalName);
+                let num = 1;
+                if(nameMap.has(val.capitalName)){
+                  num = nameMap.get(val.capitalName) + 1;
+                  nameMap.set(val.capitalName, num);
+                }else{
+                  nameMap.set(val.capitalName, num);
+                }
+                this.tableData.push({no: ++this.no, name: val.capitalName + num, position: val.position});
+              }
+            });
+          }
+        } 
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    isInArray(arr,value){
+	    for(var i = 0; i < arr.length; i++){
+	        if(value === arr[i]){
+	            return true;
+	        }
+	    }
+	    return false;
+	  },
+    showPicture(index, row) {
+      this.imgContent = row.type2 + "|" + row.status + "|" + row.position;
+      this.bigImgUrl = "/roadlinks/getCapitalImg?imgPath=" + row.imagePath;
+      this.isShowPicture = true;
+      if (row.status == "异常") {
+        this.$confirm('此情况是否为异常？', '确认信息', {
+          distinguishCancelAndClose: true,
+          confirmButtonText: '是',
+          cancelButtonText: '否'
+        })
+          .then(() => {
+            this.$confirm('是否已经处理改异常情况？', '确认信息', {
+              distinguishCancelAndClose: true,
+              confirmButtonText: '已处理',
+              cancelButtonText: '未处理'
+            })
+              .then(() => {
+                this.tableData[index].status = "正常";
+              })
+              .catch(action => {
+                // do nothing
+              });
+          })
+          .catch(action => {
+            this.tableData[index].status = "正常";
+          });
+      }
+    },
+    exportTravel(){
+        this.tableData.forEach((item, index) => {
+          item.no = index + 1 + '';
+        })
+        require.ensure([], () => {
+            //tHeader为存放excel表头标题的数组
+            const tHeader = ["序号","巡检时间","巡检目标","目标位置","目标状态"];
+            //filterVal为tHeader标题对应的键值
+            const filterVal = ["no","imageTime","type2","position","status"];
+            //list为要转化为excel文件的数据，是一个数组
+            const list = this.tableData;
+            //用map方法处理list数据
+            const data =list.map(v => filterVal.map(j => v[j]));
+            //自定义excel文件名
+            const fileName="巡检结果明细";
+            export_json_to_excel(tHeader, data,fileName);
+        });
+    }
+  },
+};
+</script>
--- a/src/views/Task.vue
+++ b/src/views/Task.vue
+<template>
+  <div class="task" ref="task">
+    <div class="box">
+      <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.plateNo"
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="车牌号"
+                    >
+                    <el-option
+                      v-for="item in plateNoOptions"
+                      :key="item.code"
+                      :label="item.plateNo"
+                      :value="item.channelCode + '_' + item.code">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-date-picker
+                    v-model="filters.dateTime"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="['00:00:00', '23:59:59']"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                </el-form-item>
+                <!-- <el-form-item>
+                  <el-select v-model="filters.type" placeholder="车辆类型">
+                    <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-select v-model="filters.status" placeholder="启用状态">
+                    <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item> -->
+                <el-form-item>
+                  <el-button type="primary" @click="queryTravel">搜索</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="exportTravel">导出轨迹</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+       <!-- 任务表 -->
+      <div class="task-table">
+ <el-table
+    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    style="width: calc(100vw - 240px);overflow:hidden;"
+    border=true
+    highlight-current-row=true
+    >
+    <el-table-column
+      label="序号"
+      width="50"
+      prop="no">
+    </el-table-column>
+    <el-table-column
+      label="车牌号"
+      width="140"
+      prop="plateNo">
+    </el-table-column>
+    <el-table-column
+      label="开始时间"
+      prop="startTime">
+    </el-table-column>
+     <el-table-column
+      label="结束时间"
+      prop="endTime">
+    </el-table-column>
+     <el-table-column
+      label="起点"
+      prop="startPoint">
+    </el-table-column>
+    <el-table-column
+      label="终点"
+      prop="endPoint">
+    </el-table-column>
+     <el-table-column
+      label="巡检距离"
+      width="80"
+      prop="inspectDistance">
+    </el-table-column>
+    <el-table-column
+      label="巡检时长"
+      width="80"
+      prop="inspectTime">
+    </el-table-column>
+    <el-table-column
+      label="平均车速"
+      width="100"
+      prop="averageSpeed">
+    </el-table-column>
+    <el-table-column fixed="right" label="巡检结果" width="100">
+
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="linkResult(scope.$index, scope.row)">查看</el-button>
+      </template>
+    </el-table-column>
+ <el-table-column fixed="right" label="操作" width="120">
+
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="linkTrail(scope.$index, scope.row)">轨迹查看</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[5, 10, 20, 40]" 
+              :page-size="pagesize"        
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="tableData.length">  
+        </el-pagination>
+      </div>
+      
+      <!-- 任务统计 -->
+      <div class="ov-map" id="ov-map">
+          <baidu-map class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" scroll-wheel-zoom @ready="handler">
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+            <div v-for="(item) in carPoints" :key="item"> 
+              <bm-polyline :path="item.polylinePath" stroke-color="red" :stroke-opacity="1" :stroke-weight="5" :editing="false" @lineupdate="updatePolylinePath">
+              </bm-polyline>
+              <bm-point-collection :points="item.points" shape="BMAP_POINT_SHAPE_CIRCLE" color="LightBLue" size="BMAP_POINT_SIZE_NORMAL" @mouseover="showTitle" @mouseout="hideTitle" @click="showPicture"></bm-point-collection>
+              <div v-for="(item1, index) in item.points" :key="item1">
+                <div v-if="index == 0 || index == item.points.length -1">
+                  <bm-marker :position="{lng: item1.lng, lat: item1.lat}" :offset="{width: 0, height: -24}" :icon="{url: item1.url, size: {width: 48, height: 48}}">
+                  </bm-marker>
+                </div>
+              </div>
+            </div>
+            <bm-info-window :position="infoPosition" :show="infoWindow.show" :closeOnClick="false">
+              <p v-html="infoWindow.contents"></p>
+            </bm-info-window>
+            <bm-city-list anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @changeBefore="changeBefore"></bm-city-list>
+          </baidu-map>
+       
+      </div>
+    </div>
+    <el-dialog
+        :visible.sync="isShowPicture"
+        width="800px"
+        >
+        <img :src="bigImgUrl" width="100%">
+    </el-dialog>
+  </div>
+  
+</template>
+<style lang="less" scope>
+.BMap_Marker{
+  z-index: 10 !important;
+}
+.task{
+  height: 100%;
+  width: 100%;
+  .box{
+    height: 100%;
+    width: 100%;
+    float: left;
+    .el-pagination{
+      padding: 15px
+    }
+    .ov-map{
+      width: 100%;
+      height: 100%;
+      background: #888
+    }
+  }
+  .picture{
+    height: 100%;
+    width: 30%;
+    float: left;
+    ul{
+      width: 100%;
+      height: 700px;
+      overflow-y: scroll;
+      margin: 0 auto;
+      margin-left: 10%;
+      li{
+        width: 80%;
+        height: auto;
+        float: left;
+        text-align: center;
+        img{
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+.map {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import gcoord from 'gcoord';
+import moment from 'moment';
+import address from '../config';
+import { export_json_to_excel } from '@/excel/Export2Excel'
+
+export default {
+  name: 'task',
+  data() {
+    return {
+      tableData: [
+        
+      ],
+      infoWindow: {
+        show: false,
+        contents: ''
+      },
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      options: [{
+        value: 'beijing',
+        label: '北京',
+      }],
+      value: 'beijing',
+      center: { lng: 116.30249408783744, lat: 39.23017874638128 },
+      infoPosition: {lng: 0,lat: 0},
+      infoShow: false,
+      zoom: 11,
+      path: [],
+      imgs: [],
+      carPoints: [],
+      allPoints: [
+        
+      ],
+      flag: true,
+      polylinePath: [],
+      points: [],
+      dialogTableVisible: false,
+      dataList: [],
+      isShowPicture: false,
+      state: '',
+      timeout:  null,
+      bigImgUrl: '',
+      filters: {
+        equipmentNo: '',
+        plateNo: '',
+        channel: '',
+        channelName: '',
+        dateTime: [],
+        type: 0,
+        status: true,
+      },
+      channelLoading: false,
+      no: 0,
+      plateNoOptions: [],
+      infos: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          },
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          },
+        }],
+      },
+
+    };
+  },
+  mounted() {
+    
+  },
+  created() {
+    this.queryAllEquipment();
+    this.queryTravel();
+  },
+  methods: {
+    showTitle(e) {
+      this.infoPosition.lng = e.point.lng;
+      this.infoPosition.lat = e.point.lat;
+      this.infos.forEach((item) => {
+        if(item.lng == e.point.lng && item.lat == e.point.lat){
+          this.infoWindow.contents = item.plateNo + " <br/>日期:" + item.date + "<br/>时间:" + item.time + "<br/>位置:" + item.position;
+        }
+      });
+      this.infoWindow.show = true;
+    },
+    hideTitle(e) {
+      this.infoWindow.show = false;
+    },
+    showPicture(e) {
+      this.infos.forEach((item) => {
+        if(item.lng == e.point.lng && item.lat == e.point.lat){
+          // 根据坐标信息获取图片
+          this.bigImgUrl = '/roadlinks/getTrajectImg?channel=' + item.channel + '&equipment=' + item.plateNo + '&createTime=' + item.date + ' ' + item.time;//this.getTrajectImg(item.channel, item.plateNo, item.date + ' ' + item.time);
+        }
+      });
+      // this.bigImgUrl = require('../assets/img/17615.jpg');
+      this.isShowPicture = true;
+    },
+    getTrajectImg(channel, plateNo, createTime){
+      axios.post(`/roadlinks/getTrajectImg`, {
+        channel: channel,
+        equipment: plateNo,
+        createTime: createTime
+      }).then((response) => {
+        
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    exportTravel(){
+        this.tableData.forEach((item) => {
+          item.no = item.no + '';
+        })
+        require.ensure([], () => {
+            //tHeader为存放excel表头标题的数组
+            const tHeader = ["序号","车牌号","开始时间","结束时间","起点","终点","巡检距离","巡检时长","平均车速"];
+            //filterVal为tHeader标题对应的键值
+            const filterVal = ["no","plateNo","startTime","endTime","startPoint","endPoint","inspectDistance","inspectTime","averageSpeed"];
+            //list为要转化为excel文件的数据，是一个数组
+            const list = this.tableData;
+            //用map方法处理list数据
+            const data =list.map(v => filterVal.map(j => v[j]));
+            //自定义excel文件名
+            const fileName="巡检任务";
+            export_json_to_excel(tHeader, data,fileName);
+        });
+    },
+    queryAllEquipment() {
+      axios.post(`/roadlinks/queryAllEquipment`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.plateNoOptions = [];
+            response.data.data.forEach((item) => {
+              this.plateNoOptions.push(item);
+            });
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    queryTravel() {
+      
+      if(this.filters.dateTime.length == 0){
+        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
+        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
+      }
+      let equipmentCode = "";
+      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+        this.filters.plateNo.forEach((item) => {
+          if(equipmentCode == ""){
+            equipmentCode += item;
+          }else{
+            equipmentCode += "," + item;
+          }
+        });
+      }
+      
+      axios.post(`/roadlinks/getTravel`, {
+        startTime: this.filters.dateTime[0],
+        endTime: this.filters.dateTime[1],
+        equipment: equipmentCode
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.tableData = [];
+            this.allPoints = [];
+            this.carPoints = [];
+            this.infos = [];
+            this.no = 0;
+            for(var key in response.data.data) {
+              if(response.data.data[key]){
+                let gisArr = response.data.data[key];
+                gisArr.forEach((val) => {
+                  if(val){
+                    //计算轨迹长度
+                    let poly = [];
+                    let points = [];
+                    let linkMap = new Map();
+                    let startPoints = [];
+                    let endPoints = [];
+                    let distance = 0;
+                    let totalDistance = 0;
+                    val.forEach((item,index) => {
+                      if(item.longitude && item.latitude){
+                        const result = gcoord.transform(
+                          [item.longitude, item.latitude],
+                          gcoord.WGS84,
+                          gcoord.BD09,
+                        );
+                        
+                        let dateTime = moment(item.timestamp).format("YYYY-MM-DD hh:mm:ss");
+                        this.infos.push({lng: result[0], lat: result[1], channel: key.split('_')[0], plateNo: key.split('_')[1], date: dateTime.split(' ')[0], time: dateTime.split(' ')[1], position: item.position});
+                        poly.push({lng: result[0], lat: result[1]});
+                        if(index == 0){
+                          points.push({lng: result[0], lat: result[1]});
+                        }else if(index == val.length - 1) {
+                          points.push({lng: result[0], lat: result[1]});
+                        }
+                        if(index < val.length - 1){
+                          if(val[index+1].longitude && val[index+1].latitude){
+                            const result1 = gcoord.transform(
+                              [val[index+1].longitude, val[index+1].latitude],
+                              gcoord.WGS84,
+                              gcoord.BD09,
+                            );
+                            if(val[index + 1].linkId == val[index].linkId){
+                              distance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
+                              totalDistance += Math.abs(val[index + 1].roadEndDis - val[index].roadEndDis);
+                            }else{
+                              distance += Math.abs(this.getDistance(result1[0],result1[1],result[0],result[1]));
+                              totalDistance += Math.abs(this.getDistance(result1[0],result1[1],result[0],result[1]));
+                            }
+                            if(distance >= 500){
+                              points.push({lng: result1[0], lat: result1[1]});
+                              distance = 0;
+                            }
+                          }
+                        }
+                        
+                        // if(linkMap.has(item.linkId)){
+                        //   linkMap.get(item.linkId).push(item);
+                        // }else{
+                        //   let distances = [];
+                        //   distances.push(item);
+                        //   linkMap.set(item.linkId, distances);
+                        // }
+                      }
+                      
+                    });
+                    // let distance = 0;
+                    // let nullLinkTrails = [];
+                    // for(let [key,value] of linkMap){
+                    //   if(key){
+                    //     value.sort(this.sortNum);
+                    //     let dist = value[value.length - 1].roadEndDis - value[0].roadEndDis;
+                    //     distance += dist;
+                    //     let startNum = value[0].roadEndDis;
+                        
+                    //     value.forEach((tral, index) => {
+                    //       const tralResult = gcoord.transform(
+                    //         [tral.longitude, tral.latitude],
+                    //         gcoord.WGS84,
+                    //         gcoord.BD09,
+                    //       );
+                          
+                    //       if(tral.linkId && startNum){
+                    //         let reduce = tral.roadEndDis - startNum;
+                    //         if(reduce > 500) {
+                    //           startNum = tral.roadEndDis;
+                    //           let pointTime = moment(tral.timestamp).format("YYYY-MM-DD hh:mm:ss");
+                    //           points.push({lng: tralResult[0], lat: tralResult[1]});
+                    //         }
+                    //       }
+                    //     });
+                    //   }else{
+                    //     value.sort(this.sortByTime);
+                    //     for(var i = 0; i < value.length - 1; i++){
+                    //       const tralResult = gcoord.transform(
+                    //         [value[i].longitude, value[i].latitude],
+                    //         gcoord.WGS84,
+                    //         gcoord.BD09,
+                    //       );
+                    //       const tralResult1 = gcoord.transform(
+                    //         [value[i+1].longitude, value[i+1].latitude],
+                    //         gcoord.WGS84,
+                    //         gcoord.BD09,
+                    //       );
+                    //       let dis = this.getDistance(tralResult1[0],tralResult1[1],tralResult[0],tralResult[1]);
+                    //       distance += dis;
+                    //       nullLinkTrails.push(tralResult);
+                    //     }
+                    //   }
+                    // }
+                    // if(nullLinkTrails.length > 0){
+
+                    //   let startTrail = nullLinkTrails[0];
+                    //   nullLinkTrails.forEach((value) => {
+                    //     let dists = this.getDistance(value[0],value[1],startTrail[0],startTrail[1]);
+                    //     if(dists > 500){
+                    //       startTrail = value;
+                    //       points.push({lng: value[0], lat: value[1]});
+                    //     }
+                    //   });
+                    // }
+                    //起点,终点添加到地图上
+                    // startPoints.forEach((startPoint) => {
+                    //   points.push(startPoint);
+                    // });
+                    // endPoints.forEach((endPoint) => {
+                    //   points.push(endPoint);
+                    // });
+                    // const startResult = gcoord.transform(
+                    //   [val[val.length - 1].longitude, val[val.length - 1].latitude],
+                    //   gcoord.WGS84,
+                    //   gcoord.BD09,
+                    // );
+                    // const endResult = gcoord.transform(
+                    //   [val[0].longitude, val[0].latitude],
+                    //   gcoord.WGS84,
+                    //   gcoord.BD09,
+                    // );
+                    this.tableData.push({
+                      no: ++ this.no, 
+                      plateNo: key.split('_')[1], 
+                      startTime: moment(val[val.length - 1].timestamp).format("YYYY-MM-DD hh:mm:ss"), 
+                      endTime: moment(val[0].timestamp).format("YYYY-MM-DD hh:mm:ss"), 
+                      startPoint: val[val.length - 1].position,
+                      endPoint: val[0].position,
+                      inspectDistance: (totalDistance/1000).toFixed(1) + 'km',
+                      inspectTime: ((val[0].timestamp - val[val.length - 1].timestamp)/(1000*3600)).toFixed(1) + 'h',
+                      averageSpeed: ((totalDistance/1000) /((val[0].timestamp - val[val.length - 1].timestamp)/(1000*3600))).toFixed(1) + 'km/h'
+                    });
+                    if(points){
+                      points[0].url = require('../assets/img/zhongdian.png');
+                      points[points.length - 1].url = require('../assets/img/qidian.png');
+                    }
+                    this.allPoints.push({polylinePath: poly, points: points});
+                    this.carPoints = this.allPoints;
+                    this.center.lng = this.carPoints[0].polylinePath[0].lng;
+                    this.center.lat = this.carPoints[0].polylinePath[0].lat;
+                  }
+                });
+              }
+            }
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    getDistance(lng1,lat1,lng2,lat2) {
+      let EARTH_RADIUS = 6378.137;
+      let radLat1 = this.rad(lat1);    
+      let radLat2 = this.rad(lat2);  
+      let a = radLat1 - radLat2;
+      let b = this.rad(lng1) - this.rad(lng2);    
+      let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)    
+              + Math.cos(radLat1) * Math.cos(radLat2)    
+              * Math.pow(Math.sin(b / 2), 2)));    
+      s = s * EARTH_RADIUS;
+      //s = Math.round(s * 10000d) / 10000d;
+      s = Math.round(s * 10000) / 10000;
+      s = s*1000;    //乘以1000是换算成米
+      return s;
+    },
+    rad(d){
+        return d * Math.PI / 180.0;    
+    },
+
+    sortNum(a,b){
+      return a.roadEndDis - b.roadEndDis;
+    },
+    sortByTime(a,b){
+      return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
+    },
+     // 初始页currentPage、初始每页数据数pagesize和数据data
+    handleSizeChange: function (size) {
+      this.pagesize = size;
+      console.log(this.pagesize)  //每页下拉显示数据
+    },
+    handleCurrentChange: function(currentPage){
+      this.currentPage = currentPage;
+      console.log(this.currentPage)  //点击第几页
+    },
+    handler ({BMap, map}) {
+      console.log(BMap, map);
+    },
+    updatePolylinePath(e) {
+      this.polylinePath = e.target.getPath();
+    },
+    changeBefore() {
+    },
+    linkTrail(index, row) {
+      console.log(index, row);
+      document.getElementById("ov-map").scrollIntoView();
+
+      // this.$nextTick(() => {
+      //   let tablePar = this.$refs["box"];
+      //   tablePar.scrollTop = tablePar.scrollHeight;
+      // });
+ 
+      this.imgs = [];
+      let point = this.allPoints[index];
+      this.carPoints = [];
+      this.carPoints.push(point);
+      this.center.lng = this.carPoints[0].polylinePath[0].lng;
+      this.center.lat = this.carPoints[0].polylinePath[0].lat;
+    },
+    // 巡检结果查看
+    linkResult(index, row) {
+
+    },
+    shutdown(index, row) {
+      console.log(index, row);
+    },
+    zoomEnd(e) {
+      this.zoom = e.target.getZoom();
+      if(this.carPoints && this.carPoints.length > 0 && this.carPoints.points && this.carPoints.points.length > 0) {
+        this.center.lng = this.carPoints[0].points[0].lng;
+        this.center.lat = this.carPoints[0].points[0].lat;
+      }
+    },
+    queryPlateSearchAsync() {
+
+    },
+    
+  },
+};
+</script>
--- a/src/views/Video.vue
+++ b/src/views/Video.vue
+<template>
+  <div class="detail">
+    <div class="box">
+       <el-row class="warp">
+         <!-- 查询区 -->
+         <el-col :span="24" class="warp-breadcrum">
+            <!--搜索栏-->
+            <el-col :span="24" class="toolbar">
+              <el-form :inline="true" :model="filters">
+                <el-form :inline="true" :model="filters">
+                <el-form-item>
+                  <el-select
+                    v-model="filters.plateNo"
+                    multiple
+                    collapse-tags
+                    filterable
+                    placeholder="车牌号"
+                    >
+                    <el-option
+                      v-for="item in plateNoOptions"
+                      :key="item.code"
+                      :label="item.plateNo"
+                      :value="item.channelCode + '_' + item.code">
+                    </el-option>
+                  </el-select>
+                  <!-- <el-autocomplete
+                    v-model="filters.channelName"
+                    :fetch-suggestions="queryChannelSearchAsync"
+                    placeholder="渠道"
+                    @select="handleChannelSelect"
+                  ></el-autocomplete> -->
+                </el-form-item>
+                <el-form-item>
+                  <el-date-picker
+                    v-model="filters.dateTime"
+                    type="daterange"
+                    align="right"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    :default-time="['00:00:00', '23:59:59']"
+                    value-format="yyyy-MM-dd HH:mm:ss"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                </el-form-item>
+                <!-- <el-form-item>
+                  <el-select v-model="filters.type" placeholder="车辆类型">
+                    <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-select v-model="filters.status" placeholder="启用状态">
+                    <el-option v-for="item in statusData" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item> -->
+                <el-form-item>
+                  <el-button type="primary" @click="queryVideos">搜索</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+        <div class="overview-line">X年X月X日, 巡检车在X公路上共停车X次。</div>
+       <!-- 任务表 -->
+      <div class="detail-table">
+ <el-table
+    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+    style="width: 100%;"
+    border=true
+    highlight-current-row=true
+    >
+    <el-table-column
+      label="序号"
+      prop="no">
+    </el-table-column>
+    <el-table-column
+      label="车牌号"
+      prop="plateNo">
+    </el-table-column>
+    <el-table-column
+      label="起始时间"
+      prop="startTime">
+    </el-table-column>
+     <el-table-column
+      label="结束时间"
+      prop="endTime">
+    </el-table-column>
+    <el-table-column
+      label="巡检时长"
+      prop="inspectTime">
+    </el-table-column>
+    <el-table-column
+      label="停车地点"
+      prop="stopPoint">
+    </el-table-column>
+    <el-table-column fixed="right" label="视频列表" width="100">
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="playVideo(scope.$index, scope.row)">播放</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20, 40]" 
+        :page-size="pagesize"        
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableData.length">  
+  </el-pagination>
+      </div>
+      
+      <!-- 任务统计 -->
+      <!-- <div class="task-echarts">
+        <h3>任务统计</h3>
+        <div class="echarts-box" id="echarts-box"></div>
+      </div> -->
+       </el-row>
+    </div>
+  </div>
+</template>
+<style lang="less" scope>
+.detail{
+  .box{
+    .el-pagination{
+      padding: 15px;
+    }
+  }
+}
+</style>
+<script>
+import axios from 'axios';
+import { Message } from 'element-ui';
+import echarts from 'echarts';
+import moment from 'moment';
+import address from '../config';
+
+export default {
+  name: 'detail',
+  data() {
+    return {
+      tableData: [
+        
+      ],
+      filters: {
+        plateNo: '',
+        dateTime: [],
+      },
+      plateNoOptions: [],
+      showCol: false,
+      currentPage:1, //初始页
+      pagesize:10, //每页的数据
+      loading: false,
+      no: 0,
+      capitalOptions: [
+        
+      ],
+      currentdate: '',
+      
+    };
+  },
+  mounted() {
+    
+  },
+  created() {
+    this.queryAllEquipment();
+    this.queryVideos();
+  },
+  methods: {
+    queryAllEquipment() {
+      axios.post(`/roadlinks/queryAllEquipment`, {
+        
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            this.plateNoOptions = [];
+            response.data.data.forEach((item) => {
+              this.plateNoOptions.push(item);
+            });
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    queryVideos() {
+      if(this.filters.dateTime.length == 0){
+        this.filters.dateTime[0] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 00:00:00';
+        this.filters.dateTime[1] = moment((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24)).format("YYYY-MM-DD") + ' 23:59:59';
+      }
+      let equipmentCode = "";
+      if(this.filters.plateNo && this.filters.plateNo.length > 0){
+        this.filters.plateNo.forEach((item) => {
+          if(equipmentCode == ""){
+            equipmentCode += item;
+          }else{
+            equipmentCode += "," + item;
+          }
+        });
+      }
+      axios.post(`/roadlinks/queryVideos`, {
+        startTime: this.filters.dateTime[0],
+        endTime: this.filters.dateTime[1],
+        equipment: equipmentCode
+      }).then((response) => {
+        if (response.data.code === 200) {
+          if (response.data.data) {
+            
+            
+          }
+        } else {
+          Message({
+            message: response.data.message,
+            // type: 'error',
+            // duration: '800',
+          });
+        }
+      })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    playVideo(index, row) {
+
+    }
+  },
+};
+</script>
--- a/tests/unit/.eslintrc.js
+++ b/tests/unit/.eslintrc.js
+module.exports = {
+  env: {
+    jest: true,
+  },
+};
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
+import { shallowMount } from '@vue/test-utils';
+import HelloWorld from '@/components/HelloWorld.vue';
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message';
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg },
+    });
+    expect(wrapper.text()).toMatch(msg);
+  });
+});