初次提交

夏新然
Commit 4c917f85 authored Dec 27, 2019 by 夏新然
Showing 77 changed files with 4742 additions and 0 deletions
.env.dev
.gitignore
README.md
babel.config.js
package-lock.json
package.json
public/favicon.ico
public/index.html
src/App.vue
src/api/apiList.js
src/api/axios.js
src/api/baseUrl.js
src/api/index.js
src/api/install.js
src/api/login/index.js
src/api/login/urls.js
src/api/map/index.js
src/api/map/urls.js
src/api/search/index.js
src/api/search/urls.js
--- a/.env.dev
+++ b/.env.dev
+NODE_ENV = '"development"'
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
+# fanxing
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your unit tests
+```
+npm run test:unit
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "fanxing",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^3.3.2",
+    "echarts": "^4.5.0",
+    "element-ui": "^2.12.0",
+    "js-sha1": "^0.6.0",
+    "moment": "^2.24.0",
+    "ol": "^6.1.1",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.0",
+    "@vue/cli-plugin-unit-mocha": "^4.0.0",
+    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "@vue/eslint-config-prettier": "^5.0.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-eslint": "^10.0.3",
+    "chai": "^4.1.2",
+    "eslint": "^5.16.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.12.0",
+    "prettier": "^1.18.2",
+    "sass-loader": "^8.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/prettier"
+    ],
+    "rules": {
+      "indent": "off",
+      "no-console": "off",
+      "no-unused-vars": "off",
+      "no-use-before-define": "off",
+      "no-undef": "off",
+      "no-irregular-whitespace": "off",
+      "no-debugger": "off"
+    },
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/__tests__/*.{j,t}s?(x)"
+        ],
+        "env": {
+          "mocha": true
+        }
+      }
+    ]
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- 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>fanxing</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but fanxing 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" class="blue">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+#app {
+  font-family:MicrosoftYaHeiUI;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
--- a/src/api/apiList.js
+++ b/src/api/apiList.js
+import map from './map'
+import login from './login'
+import task from './taskManage'
+import search from './search'
+export default {
+  map,
+  login,
+  task,
+  search
+}
\ No newline at end of file
--- a/src/api/axios.js
+++ b/src/api/axios.js
+import axios from 'axios'
+import store from '../store/index.js'
+
+// 创建 axios 实例
+let service = axios.create({
+  // headers: {'Content-Type': 'application/json'},
+  timeout: 60000
+})
+
+// 设置 post、put 默认 Content-Type
+service.defaults.headers.post['Content-Type'] = 'application/json'
+service.defaults.headers.put['Content-Type'] = 'application/json'
+
+// 添加请求拦截器
+service.interceptors.request.use(
+  (config) => {
+	  if (store.state.users.atoken) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
+		  config.headers.authorization = store.state.users.atoken;
+	  }
+	  if (config.method == 'post') {
+	   config.data = {
+		 ...config.data,
+		 _t: Date.parse(new Date()) / 1000
+	   }
+	 } else if (config.method == 'get') {
+	   config.params = {
+		 _t: Date.parse(new Date()) / 1000,
+		 ...config.params
+	   }
+	 }
+	return config
+  },
+  (error) => {
+    // 请求错误处理
+    return Promise.reject(error)
+  }
+)
+
+// 添加响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    let { data } = response
+    return data
+  },
+  (error) => {
+	  console.log(error)
+	  let info = {}
+
+    if (!error.response) {
+      info = {
+        code: 5000,
+        msg: 'Network Error'
+      }
+    } else {
+		let { status, statusText, data } = error.response
+      // 此处整理错误信息格式
+      info = {
+        code: status,
+        data: data,
+        msg: statusText
+      }
+    }
+	return Promise.reject(error)
+  }
+)
+
+/**
+ * 创建统一封装过的 axios 实例
+ * @return {AxiosInstance}
+ */
+export default function() {
+  return service
+}
\ No newline at end of file
--- a/src/api/baseUrl.js
+++ b/src/api/baseUrl.js
+let baseUrl = '/api' // 本地代理
+console.log(process.env.NODE_ENV)
+switch (process.env.NODE_ENV) {
+  case 'development':
+  baseUrl = 'http://192.168.9.133:20080' // 测试环境url
+	  // baseUrl="http://192.168.9.162:20080"
+    break
+  case 'pre':
+    baseUrl = 'https://pre-server.feleti.cn' // 预上线环境url
+    break
+  case 'production':
+    baseUrl = 'https://api.feleti.cn' // 生产环境url
+    break
+}
+
+export default baseUrl
\ No newline at end of file
--- a/src/api/index.js
+++ b/src/api/index.js
+import axios from './axios'
+
+let instance = axios()
+
+export default {
+  get(url, params, headers) {
+    let options = {}
+
+    if (params) {
+      options.params = params
+    }
+    if (headers) {
+      options.headers = headers
+    }
+    return instance.get(url, options)
+  },
+  post(url,data,headers,params) {
+    let options = {}
+
+    if (params) {
+      options.params = params
+    }
+    if (headers) {
+      options.headers = headers
+    }
+    return instance.post(url, data, options)
+  },
+  put(url, params, headers) {
+    let options = {}
+
+    if (headers) {
+      options.headers = headers
+    }
+    return instance.put(url, params, options)
+  },
+  delete(url, params, headers) {
+    let options = {}
+
+    if (params) {
+      options.params = params
+    }
+    if (headers) {
+      options.headers = headers
+    }
+    return instance.delete(url, options)
+  }
+}
\ No newline at end of file
--- a/src/api/install.js
+++ b/src/api/install.js
+import apiList from './apiList'
+
+const install = function(Vue) {
+  if (install.installed) {
+    return
+  }
+  install.installed = true
+  Object.defineProperties(Vue.prototype, {
+    $api: {
+      get() {
+        return apiList
+      }
+    }
+  })
+}
+
+export default {
+  install
+}
\ No newline at end of file
--- a/src/api/login/index.js
+++ b/src/api/login/index.js
+import api from '../index'
+import urls from './urls'
+
+export default {
+	//登陆
+  login(params,id) {
+    return api.post(urls.login,params)
+  },
+  algocombs(params,id){
+	  return api.get(urls.algocombs,params)
+  },
+  storeconfs(params,id){
+	  return api.get(urls.storeconfs,params)
+  },
+  cates(params,id){
+  	  return api.get(urls.cates,params)
+  },
+  codes(params,id){
+  	  return api.get(urls.codes+id+'/codes',params)
+  }
+}
\ No newline at end of file
--- a/src/api/login/urls.js
+++ b/src/api/login/urls.js
+import baseUrl from '../baseUrl'
+export default {
+  login: baseUrl + '/api/v1/devconf_fx/users/login',
+  algocombs:baseUrl+'/api/v1/devconf_fx/algo_combs',
+  storeconfs:baseUrl+'/api/v1/devconf_fx/store_confs',
+  cates:baseUrl+'/api/v1/codes/traffic/cates',
+  codes:baseUrl+'/api/v1/codes/traffic/cates/',
+}
\ No newline at end of file
--- a/src/api/map/index.js
+++ b/src/api/map/index.js
+import api from '../index'
+import urls from './urls'
+
+const header = {}
+
+export default {
+  archive(params) {
+    // return出去了一个promise
+    return api.get(urls.archive, params)
+  },
+  detail(params,id) {
+    // return出去了一个promise
+    return api.get(urls.detail+id,params)
+  },
+  pass(params,id) {
+    // return出去了一个promise
+    return api.post(urls.pass+id,params)
+  },
+  delResult(params,id) {
+    // return出去了一个promise
+    return api.delete(urls.delResult+id,params)
+  },
+  delEvent(params,id) {
+    // return出去了一个promise
+    return api.delete(urls.delEvent+id,params)
+  },
+  eventTypeData(params) {
+    // return出去了一个promise
+    return api.get(urls.eventTypeData,params)
+  },
+  homeNum(params) {
+    // return出去了一个promise
+    return api.get(urls.homeNum,params)
+  },
+  homeLine(params) {
+    // return出去了一个promise
+    return api.get(urls.homeLine,params)
+  },
+  homeCatch(params) {
+    // return出去了一个promise
+    return api.get(urls.homeCatch,params)
+  },
+  setClose(params) {
+    // return出去了一个promise
+    return api.post(urls.pass,params)
+  },
+}
\ No newline at end of file
--- a/src/api/map/urls.js
+++ b/src/api/map/urls.js
+import baseUrl from '../baseUrl'
+export default {
+  archive: baseUrl + '/api/v1/datahandle/behavior/archive',
+  detail:baseUrl+'/api/v1/datahandle/behavior/archive/',
+  pass:baseUrl+'/api/v1/datahandle/behavior/audit/',
+  delResult:baseUrl+'/api/v1/datahandle/behavior/events/',
+  delEvent:baseUrl+'/api/v1/datahandle/behavior/archive/',
+  eventTypeData:'http://192.168.9.133:20080'+'/api/v1/codes/event_types',
+  homeNum:baseUrl+'/api/v1/datahandle/statistics/type',
+  homeLine:baseUrl+'/api/v1/datahandle/statistics/hour',
+  homeCatch:baseUrl+'/api/v1/datahandle/statistics/handle',
+}
\ No newline at end of file
--- a/src/api/search/index.js
+++ b/src/api/search/index.js
+import api from '../index'
+import urls from './urls'
+
+export default {
+  vehicleList(params) {
+    return api.get(urls.vehicleList, params)
+  },
+  detailImg(params,id) {
+	  return api.get(urls.detailImg+id, params)
+  },
+  delVehicle(params,id) {
+    // return出去了一个promise
+    return api.delete(urls.delVehicle+id,params)
+  },
+}
\ No newline at end of file
--- a/src/api/search/urls.js
+++ b/src/api/search/urls.js
+import baseUrl from '../baseUrl'
+export default {
+  vehicleList: baseUrl + '/api/v1/traffic/events',
+  detailImg: baseUrl + '/api/v1/web/pics/',
+  delVehicle: baseUrl + '/api/v1/traffic/events/',
+}
\ No newline at end of file
--- a/src/api/taskManage/index.js
+++ b/src/api/taskManage/index.js
+import api from '../index'
+import urls from './urls'
+
+export default {
+  tasks(params,id){
+	  return api.get(urls.tasks,params)
+  },
+  subtasks(params,id){
+	  return api.get(urls.subtasks+id+'/subtasks',params)
+  },
+}
\ No newline at end of file
--- a/src/api/taskManage/urls.js
+++ b/src/api/taskManage/urls.js
+import baseUrl from '../baseUrl'
+export default {
+  tasks: baseUrl + '/api/v1/devconf_fx/tasks',
+  subtasks:baseUrl+'/api/v1/devconf_fx/tasks/',
+}
\ No newline at end of file
--- a/src/assets/icon/iconfont.css
+++ b/src/assets/icon/iconfont.css
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1576476926424'); /* IE9 */
+  src: url('iconfont.eot?t=1576476926424#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeoAAsAAAAADmAAAAdaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEWgqNTIsRATYCJAM0CxwABCAFhG0HgSQbQQwRFazBIPsiwXYbjYex0EY0EOX0NolDuGdNRuHU9nSSQXIUhxzEErAsB6HA7mPaifzPdoFCVCDyEyQpGR4o36kLAA6AGviHMQeC2l2271x/n1DoCDOUZz8pYN91aZsrZC/NPl3t96vqDZou0iwkanvit18WP0wtMTRIGhIhich0fkKskSElSs1YxK5mkw7sQd4NBACPKHQGGT12sgQNWDCLoNv8OSV50Axkgp0RTqCxqyacyYKsBQcN8yXTAmCN/X1yCz2JBmDAUbB7TS8eU4jhHlz/kCpeBZlUgWVzHECyHUABdAbAJrZTEwuOgPqGzqDgq7/K4gsAIdCDQuOBR+0xeCI8UZ6entGefE+h59PrH3pD6UZNzJYShHDvsH/yAAo1GKhAoIMADThowYMFiApgunBW00CWB5JAK1TDgkUDCAwwAgQVMAoEAuwJeRM4CgQBOBoEDTAfBA5YCIIW+Ck4eDxeCtQHm/lQ3zAAyQAjUNZZsKBCFDDgbi9jeIEarL0CjU7W6UJ4f0OMTkt0OhIaoZLpKc/q9Sybpw4k7muIIqdlM5xGt9sEZW9iuWBLLqistdQY8rfx1sAtewCH4wPrDsDpkHQul4m63CZh+27LLp4nvMMhMU6n0XfJU4llV4GPrdJSYdBt3KiUm9pwXmc1SxZikC44ciaCqT/bx+e4PZo2nMuqOpOg23YujPqGi6TWnixAIEGbrWdDSysr1m5aVKR1I/CIQXnltuAFcsU2njfykk6WTbx1S6C0sSrIWF4u+Nkqg02VNfMcjpjm0zgmusElbTtnsdvOKmcS6D4y58nluVyZwpSd2C+O4QVWGdxlMeXcbTMSdypSXudIh1K+sXxZqDyCKp5UVBzASqU8qHRDfdKkjdsMtHJ7dSulVDxyIYKtv9jH9/jlaK7h0myaN5wHP9LnStmoM5l0W3aESFU7BR/b7jC5ZleauOVMaFb12USf7fbwnNpzs/l0IY2nst0HvPVcGHc5xMsQwVadKW4tEKMkC+jN4Sc/HDxKv3fGsk2O0T+44jjLYfuvou3nswcxUrTZXXpISjQ3f+DbmOVCyTRPMprslqHnrO/7QX8oElOCR3exXGpcSSYEjQi9pg/uEvrHL3fi7/4c+mdUiP5a6MigCYfpnac9pm81tBiGcjNHzl9DajaSIWZOhnpZ+qyxhE5v6dRqoKSXTMxmIrcSoymQSRGOM9YYWjD+xkL1F+IXuQtzdaYqt2BqlK7L6tiJmW/l4I7dvS5Tb/cd9pp+SYw+dkesnpECRUMuExvTsW+nvm/xKTrGxDLofvFxbDK7/Zm6RrNZvUv9bBubHEvujRJHMWLziiJZO/xYjWPqkn6TFl/CmZqJ2rHvNK0ompEy7LuUl9pS7csQt1XICHi75bCfmpOSkCyHzec+Wt65c0P+s/stw3my+7f3sTdusPsELapRvdbLzeyWNczUUAh7mVkzt6WcjoOAo80cvGTq2MjREbPnRIyKGlsnBkeMnj17dOTYyLoJZmTPrMvDRs2eI5hts2e3anf57dKgpU2Jr65tbVPv9tutaWvTnPI7tRgx8eIOtv0/uoNTe7uqpf+1szuw9X//0aYXa9yrfWN8V7ncOT9Fopc5auGBamGhUH0guuqbeQ1z2tCTYrhi1MQgRmO8MFwsFMVRz4ah+43e/p8GzA0aHjg3gK6Y8HvN0NwmGtZrWEfz2v8OFHTsPSyM/jJcGm1X7FT7ldJoz1UuQp/c3kPD4/hb2rimoWvjtLf4uDXLTi0/teL5qecnnw85/YKPCzsdNst/7WnjxcgW6DlLuThjRuRfkZR5sd0NkKrHdI4aUy2N2tunbI8uAbHDe9G1tNfw4fGmMP4HxDh8wlPC++rAntIPRzy8PzLvXE72od0ZGX0K+kgFnQ7PmG2ejbLnAOCtZkGLAYB2ZBzeK1+y4VSdxv6vgUZtV8Z44b1P11ExqGvXSKOJFMpF8F+Vb0dAQZnjg9H/6kRjmxroCZr/X7EXll49ti/Hd/ATjfB5rv4jcsTbUNyde9lgBYAGDLCw8s9ALGa4XdVrjWX5sKUqF/FeGZwE5A3E+mAy1HUMAJ4vAP4RSvzxz25sQQsrf0S2oB4wUCMSKDRIcGe9OwMHAb1BBQ2GAY9OGHe+gAAsBQVhtQA64tMACPTYDwxE2IFCj1Z31vtv4GDAHVBBTyjwkEnAFQUk0aXzG0GjOMP0B2S5OJGj5677G/o1GenXbNQXSqVqGNp+uPkBC8omjqnfflR14IQz3Af3w5QYFuEdWm2D6rLtOjfp2NZy3pzjRtCoTjoD019aslzc8no+8vNv6NdkZMa4VdovlEqbBwZa+gXcH1hZaNxD6Vu//YgSdyCHCmfgnjgm3sDAMnm3HVptCSvULVs6ms8tytrd2/J9vgG4YDdoEqblcLrcHn9pr/RsP8eFhm1YD4USHSX2VE7+gyk10KWZ58aS2IRNPZnYmeKHY7vd8YxqKJ09kr95RLxEV1OUir8mSe74H+j4l1ZvaLMBAA==') format('woff2'),
+  url('iconfont.woff?t=1576476926424') format('woff'),
+  url('iconfont.ttf?t=1576476926424') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1576476926424#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-daochu:before {
+  content: "\e61e";
+}
+
+.icon-rili:before {
+  content: "\e616";
+}
+
+.icon-login:before {
+  content: "\e600";
+}
+
+.icon-zhanshi:before {
+  content: "\e87a";
+}
+
+.icon-add-circle-s:before {
+  content: "\e662";
+}
+
+.icon-bofang1:before {
+  content: "\e61c";
+}
+
+.icon-bofang:before {
+  content: "\e607";
+}
+
+.icon-detail:before {
+  content: "\e644";
+}
+
+.icon-Migration:before {
+  content: "\e664";
+}
+
+.icon-zanting:before {
+  content: "\e685";
+}
+
+.icon-zantingtingzhi:before {
+  content: "\e643";
+}
+
+.icon-xiugai:before {
+  content: "\e632";
+}
+
--- 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(a){var t,n='<svg><symbol id="icon-daochu" viewBox="0 0 1024 1024"><path d="M179.2 610.4c0 51.2 8.8 100.8 24.8 146.4 58.4-170.4 213.6-292 397.6-292l0 72.8c0 28 15.2 52.8 39.2 65.6 9.6 4.8 20.8 8 31.2 8 15.2 0 29.6-4.8 42.4-14.4l281.6-219.2c17.6-13.6 28-35.2 28-58.4 0-23.2-10.4-44.8-28-58.4L714.4 40.8c-12-9.6-27.2-14.4-42.4-14.4-10.4 0-21.6 2.4-31.2 8-24 12-39.2 37.6-39.2 65.6l0 72.8C368.8 172 179.2 368.8 179.2 610.4z"  ></path><path d="M972.8 588.8c-28 0-51.2 23.2-51.2 51.2l0 51.2 0 10.4c0 108-4 194.4-204.8 194.4L307.2 896c-207.2 0-204.8-92-204.8-204.8l0-256C88 274.4 164 239.2 256 232l0 0 3.2 0c28 0 51.2-23.2 51.2-51.2 0-28-23.2-52-51.2-52l-3.2 0L256 128l-51.2 0C92 128 0 220 0 332.8l0 460.8c0 112.8 92 204.8 204.8 204.8l613.6 0c112.8 0 204.8-92 204.8-204.8L1023.2 640C1024 612 1000.8 588.8 972.8 588.8z"  ></path></symbol><symbol id="icon-rili" viewBox="0 0 1024 1024"><path d="M329.197037 662.186667l365.605926 0c9.102222 0 16.402963-7.395556 16.402963-16.402963s-7.395556-16.402963-16.402963-16.402963L329.197037 629.380741c-9.102222 0-16.402963 7.395556-16.402963 16.402963S320.094815 662.186667 329.197037 662.186667z"  ></path><path d="M329.197037 565.380741l365.605926 0c9.102222 0 16.402963-7.395556 16.402963-16.402963 0-9.102222-7.395556-16.402963-16.402963-16.402963L329.197037 532.574815c-9.102222 0-16.402963 7.395556-16.402963 16.402963C312.794074 557.985185 320.094815 565.380741 329.197037 565.380741z"  ></path><path d="M724.385185 214.755556l-42.477037 0 0-42.477037-42.477037 0 0 42.477037L384.568889 214.755556l0-42.477037-42.477037 0 0 42.477037L299.614815 214.755556c-46.648889 0-84.859259 38.21037-84.859259 84.859259l0 467.247407c0 46.648889 38.21037 84.859259 84.859259 84.859259l424.77037 0c46.648889 0 84.859259-38.21037 84.859259-84.859259L809.244444 299.614815C809.244444 252.965926 771.034074 214.755556 724.385185 214.755556zM778.145185 766.862222c0 23.419259-30.435556 53.76-53.76 53.76L299.614815 820.622222c-23.419259 0-53.76-30.435556-53.76-53.76L245.854815 427.045926l532.385185 0L778.24 766.862222zM779.093333 395.946667 244.906667 395.946667 244.906667 299.614815c0-23.419259 31.383704-53.76 54.708148-53.76l42.477037 0L342.091852 299.614815l42.477037 0 0-53.854815 254.767407 0L639.336296 299.614815l42.477037 0 0-53.854815L724.385185 245.76c23.419259 0 54.708148 30.435556 54.708148 53.76L779.093333 395.946667z"  ></path></symbol><symbol id="icon-login" viewBox="0 0 1024 1024"><path d="M780.875 396.388c1.754-1.622 2.427-4.217 1.501-6.574-0.924-2.365-3.182-3.804-5.574-3.804h-166.755l0.359-246.761c0.005-4.603-1.742-9.209-5.254-12.72-3.508-3.514-8.111-5.274-12.715-5.274h-163.328c-4.597 0-9.201 1.76-12.715 5.274-3.506 3.513-5.255 8.117-5.25 12.72l0.332 246.761h-166.764c-2.387 0-4.643 1.438-5.575 3.804-0.925 2.359-0.252 4.951 1.504 6.574l257.895 239.15c3.209 2.971 7.502 4.794 12.218 4.794 4.72 0 9.013-1.824 12.219-4.794l257.902-239.15zM1037.742 650.941l-161.68-126.155c-9.159-7.147-26.16-12.993-37.775-12.993h-64.199l182.757 155.557-211.754 0.103-79.019 113.225h-311.316l-75.815-113.121-210.615-0.103 188.985-155.756-74.142 0.097c-11.617 0-28.618 5.847-37.776 12.993l-161.68 126.154c-9.159 7.148-13.701 22.029-10.091 33.073l64.499 197.362c3.609 11.043 16.067 20.078 27.684 20.078h891.089c11.617 0 24.032-9.049 27.591-20.108l63.447-197.302c3.554-11.061-1.029-25.956-10.19-33.103z"  ></path></symbol><symbol id="icon-zhanshi" viewBox="0 0 1024 1024"><path d="M512 336.1c-124.1 0-232.7 108.6-232.7 175.9 0 67.2 108.6 175.9 232.7 175.9 129.3 0 232.7-124.1 232.7-175.9 0-51.7-103.4-175.9-232.7-175.9z m0 253.5c-41.4 0-77.6-36.2-77.6-77.6 0-41.4 36.2-77.6 77.6-77.6 41.4 0 77.6 36.2 77.6 77.6 0 41.4-36.2 77.6-77.6 77.6z m0 0"  ></path><path d="M512 98.2C284.4 98.2 98.2 284.4 98.2 512S284.4 925.8 512 925.8 925.8 739.6 925.8 512 739.6 98.2 512 98.2z m0 641.4c-150 0-284.5-129.3-284.5-227.6 0-98.3 134.5-227.6 284.5-227.6S796.5 424.1 796.5 512 662 739.6 512 739.6z m0 0"  ></path></symbol><symbol id="icon-add-circle-s" viewBox="0 0 1024 1024"><path d="M512 894.5c-51.6 0-101.7-10.1-148.9-30.1-45.6-19.3-86.5-46.8-121.6-82-35.1-35.1-62.7-76-82-121.6-20-47.2-30.1-97.3-30.1-148.9s10.1-101.7 30.1-148.9c19.3-45.6 46.8-86.5 82-121.6 35.1-35.1 76-62.7 121.6-82 47.2-20 97.3-30.1 148.9-30.1s101.7 10.1 148.9 30.1c45.6 19.3 86.5 46.8 121.6 82 35.1 35.1 62.7 76 82 121.6 20 47.2 30.1 97.3 30.1 148.9s-10.1 101.7-30.1 148.9c-19.3 45.6-46.8 86.5-82 121.6-35.1 35.1-76 62.7-121.6 82-47.2 20-97.3 30.1-148.9 30.1z m-17.3-361.9v205.8c0 11 9 20 20 20s20-9 20-20l-1-205.7h206.7c11 0 20-9 20-20s-9-20-20-20H534.7V287c0-11-9-20-20-20s-20 9-20 20v205.7H289c-11 0-20 9-20 20s9 20 20 20l205.7-0.1z"  ></path></symbol><symbol id="icon-bofang1" viewBox="0 0 1024 1024"><path d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z"  ></path></symbol><symbol id="icon-bofang" viewBox="0 0 1024 1024"><path d="M822.824 97.58H201.176c-57.196 0-103.595 46.398-103.595 103.595v621.647c0 57.197 46.4 103.597 103.595 103.597h621.649c57.196 0 103.595-46.4 103.595-103.597V201.176c0-57.198-46.4-103.596-103.596-103.596zM356.607 719.147V304.851l362.54 207.108-362.54 207.188z"  ></path></symbol><symbol id="icon-detail" viewBox="0 0 1024 1024"><path d="M800.111944 127.936032H223.888056C171.178411 127.936032 128.191904 170.922539 128.191904 224.143928V255.872064h767.616192v-32.23988c0-52.709645-42.986507-95.696152-95.696152-95.696152m-167.852074-63.968016l14.328836 100.813593H377.411294l14.328836-100.813593h240.51974M639.936032 0H384.063968c-26.610695 0-51.174413 21.493253-54.756622 47.592204l-18.934532 134.076961c-3.582209 26.098951 14.84058 47.592204 41.451274 47.592204h319.84008c26.610695 0 45.033483-21.493253 41.451274-47.592204l-18.934532-134.076961C691.110445 21.493253 666.546727 0 639.936032 0m176.03998 319.84008H208.023988c-35.310345 0-61.409295 28.657671-58.338831 63.968016l52.197901 576.223888c3.070465 34.798601 34.798601 63.968016 69.597202 63.968016h480.015992c35.310345 0 66.526737-28.657671 69.597201-63.968016L873.803098 383.808096c3.582209-35.310345-22.516742-63.968016-57.827086-63.968016M384.063968 895.552224H287.856072L256.127936 447.776112h127.936032V895.552224z m191.904048 0h-127.936032V447.776112h127.936032V895.552224z m160.175912 0H639.936032V447.776112h127.936032l-31.728136 447.776112z" fill="" ></path></symbol><symbol id="icon-Migration" viewBox="0 0 1024 1024"><path d="M853.840124 948.467989h-62.27438c-34.42119 0-62.274379-27.853189-62.274379-62.274379v-746.806034c0-34.42119 27.853189-62.274379 62.274379-62.27438h62.27438c34.42119 0 62.274379 27.853189 62.274379 62.27438v746.806034c-0.12163 34.42119-27.974819 62.274379-62.274379 62.274379z m-373.403017-373.403017H293.735598V450.516213h186.701509V326.089084l248.975887 186.701509-248.975887 186.701508V575.064972zM231.461219 637.217722h186.701508v248.975888c0 34.42119-27.853189 62.274379-62.274379 62.274379H169.186839c-34.42119 0-62.274379-27.853189-62.274379-62.274379v-746.806034c0-34.42119 27.853189-62.274379 62.274379-62.27438h186.701509c34.42119 0 62.274379 27.853189 62.274379 62.27438v248.975888H231.461219v248.854258z m0 0" fill="" ></path></symbol><symbol id="icon-zanting" viewBox="0 0 1024 1024"><path d="M804.571429 0a146.285714 146.285714 0 0 1 146.285714 146.285714v731.428572a146.285714 146.285714 0 1 1-292.571429 0V146.285714a146.285714 146.285714 0 0 1 146.285715-146.285714zM219.428571 0a146.285714 146.285714 0 0 1 146.285715 146.285714v731.428572a146.285714 146.285714 0 1 1-292.571429 0V146.285714a146.285714 146.285714 0 0 1 146.285714-146.285714z"  ></path></symbol><symbol id="icon-zantingtingzhi" viewBox="0 0 1024 1024"><path d="M720.896 95.232c-47.616 0-89.6 41.472-89.6 89.088v655.36c0 47.616 41.984 89.088 89.6 89.088s89.6-41.472 89.6-89.088V184.32c-0.512-47.616-41.984-89.088-89.6-89.088z m-417.792 0c-47.616 0-89.6 41.472-89.6 89.088v655.36c0 47.616 41.984 89.088 89.6 89.088s89.6-41.472 89.6-89.088V184.32c0-47.616-41.984-89.088-89.6-89.088z"  ></path></symbol><symbol id="icon-xiugai" viewBox="0 0 1024 1024"><path d="M768.487 388.361L590.76 215.067 210.93 594.492l-66.201 242.161v0.4L386.483 769.8zM739.523 66.62l-95.197 95.04 178.296 172.65 92.375-92.296c48.487-48.406 48.487-126.985 0-175.392-48.405-48.407-127.069-48.407-175.474-0.002zM79.029 878.71h872.333v114.976H79.029z"  ></path></symbol></svg>',c=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var c=function(){document.removeEventListener("DOMContentLoaded",c,!1),t()};document.addEventListener("DOMContentLoaded",c,!1)}else document.attachEvent&&(l=t,o=a.document,i=!1,(n=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(n,50)}e()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,e())});function e(){i||(i=!0,l())}var l,o,i,n}(function(){var t,c,e,l,o,i;(t=document.createElement("div")).innerHTML=n,n=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(l=document.body).firstChild?(o=e,(i=l.firstChild).parentNode.insertBefore(o,i)):l.appendChild(e))})}(window);
\ No newline at end of file
--- a/src/assets/icon/iconfont.json
+++ b/src/assets/icon/iconfont.json
+{
+  "id": "1565499",
+  "name": "繁星2.0",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "831114",
+      "name": "导出",
+      "font_class": "daochu",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "1010109",
+      "name": "日历",
+      "font_class": "rili",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "1355658",
+      "name": "导入",
+      "font_class": "login",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "6237827",
+      "name": "展示",
+      "font_class": "zhanshi",
+      "unicode": "e87a",
+      "unicode_decimal": 59514
+    },
+    {
+      "icon_id": "6367958",
+      "name": "添加",
+      "font_class": "add-circle-s",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "7588088",
+      "name": "播放",
+      "font_class": "bofang1",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "7815001",
+      "name": "播放",
+      "font_class": "bofang",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "7978614",
+      "name": "删 除",
+      "font_class": "detail",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "8147570",
+      "name": "迁移",
+      "font_class": "Migration",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "8386986",
+      "name": "暂停",
+      "font_class": "zanting",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "9356268",
+      "name": "暂停 停止",
+      "font_class": "zantingtingzhi",
+      "unicode": "e643",
+      "unicode_decimal": 58947
+    },
+    {
+      "icon_id": "10905634",
+      "name": "修 改",
+      "font_class": "xiugai",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    }
+  ]
+}
--- 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="daochu" unicode="&#58910;" d="M179.2 285.6c0-51.2 8.8-100.8 24.8-146.4 58.4 170.4 213.6 292 397.6 292l0-72.8c0-28 15.2-52.8 39.2-65.6 9.6-4.8 20.8-8 31.2-8 15.2 0 29.6 4.8 42.4 14.4l281.6 219.2c17.6 13.6 28 35.2 28 58.4 0 23.2-10.4 44.8-28 58.4L714.4 855.2c-12 9.6-27.2 14.4-42.4 14.4-10.4 0-21.6-2.4-31.2-8-24-12-39.2-37.6-39.2-65.6l0-72.8C368.8 724 179.2 527.2 179.2 285.6zM972.8 307.2c-28 0-51.2-23.2-51.2-51.2l0-51.2 0-10.4c0-108-4-194.4-204.8-194.4L307.2 0c-207.2 0-204.8 92-204.8 204.8l0 256C88 621.6 164 656.8 256 664l0 0 3.2 0c28 0 51.2 23.2 51.2 51.2 0 28-23.2 52-51.2 52l-3.2 0L256 768l-51.2 0C92 768 0 676 0 563.2l0-460.8c0-112.8 92-204.8 204.8-204.8l613.6 0c112.8 0 204.8 92 204.8 204.8L1023.2 256C1024 284 1000.8 307.2 972.8 307.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="rili" unicode="&#58902;" d="M329.197037 233.813333l365.605926 0c9.102222 0 16.402963 7.395556 16.402963 16.402963s-7.395556 16.402963-16.402963 16.402963L329.197037 266.619259c-9.102222 0-16.402963-7.395556-16.402963-16.402963S320.094815 233.813333 329.197037 233.813333zM329.197037 330.619259l365.605926 0c9.102222 0 16.402963 7.395556 16.402963 16.402963 0 9.102222-7.395556 16.402963-16.402963 16.402963L329.197037 363.425185c-9.102222 0-16.402963-7.395556-16.402963-16.402963C312.794074 338.014815 320.094815 330.619259 329.197037 330.619259zM724.385185 681.244444l-42.477037 0 0 42.477037-42.477037 0 0-42.477037L384.568889 681.244444l0 42.477037-42.477037 0 0-42.477037L299.614815 681.244444c-46.648889 0-84.859259-38.21037-84.859259-84.859259l0-467.247407c0-46.648889 38.21037-84.859259 84.859259-84.859259l424.77037 0c46.648889 0 84.859259 38.21037 84.859259 84.859259L809.244444 596.385185C809.244444 643.034074 771.034074 681.244444 724.385185 681.244444zM778.145185 129.137778c0-23.419259-30.435556-53.76-53.76-53.76L299.614815 75.377778c-23.419259 0-53.76 30.435556-53.76 53.76L245.854815 468.954074l532.385185 0L778.24 129.137778zM779.093333 500.053333 244.906667 500.053333 244.906667 596.385185c0 23.419259 31.383704 53.76 54.708148 53.76l42.477037 0L342.091852 596.385185l42.477037 0 0 53.854815 254.767407 0L639.336296 596.385185l42.477037 0 0 53.854815L724.385185 650.24c23.419259 0 54.708148-30.435556 54.708148-53.76L779.093333 500.053333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="login" unicode="&#58880;" d="M780.875 499.612c1.754 1.622 2.427 4.217 1.501 6.574-0.924 2.365-3.182 3.804-5.574 3.804h-166.755l0.359 246.761c0.005 4.603-1.742 9.209-5.254 12.72-3.508 3.514-8.111 5.274-12.715 5.274h-163.328c-4.597 0-9.201-1.76-12.715-5.274-3.506-3.513-5.255-8.117-5.25-12.72l0.332-246.761h-166.764c-2.387 0-4.643-1.438-5.575-3.804-0.925-2.359-0.252-4.951 1.504-6.574l257.895-239.15c3.209-2.971 7.502-4.794 12.218-4.794 4.72 0 9.013 1.824 12.219 4.794l257.902 239.15zM1037.742 245.059l-161.68 126.155c-9.159 7.147-26.16 12.993-37.775 12.993h-64.199l182.757-155.557-211.754-0.103-79.019-113.225h-311.316l-75.815 113.121-210.615 0.103 188.985 155.756-74.142-0.097c-11.617 0-28.618-5.847-37.776-12.993l-161.68-126.154c-9.159-7.148-13.701-22.029-10.091-33.073l64.499-197.362c3.609-11.043 16.067-20.078 27.684-20.078h891.089c11.617 0 24.032 9.049 27.591 20.108l63.447 197.302c3.554 11.061-1.029 25.956-10.19 33.103z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zhanshi" unicode="&#59514;" d="M512 559.9c-124.1 0-232.7-108.6-232.7-175.9 0-67.2 108.6-175.9 232.7-175.9 129.3 0 232.7 124.1 232.7 175.9 0 51.7-103.4 175.9-232.7 175.9z m0-253.5c-41.4 0-77.6 36.2-77.6 77.6 0 41.4 36.2 77.6 77.6 77.6 41.4 0 77.6-36.2 77.6-77.6 0-41.4-36.2-77.6-77.6-77.6z m0 0M512 797.8C284.4 797.8 98.2 611.6 98.2 384S284.4-29.8 512-29.8 925.8 156.4 925.8 384 739.6 797.8 512 797.8z m0-641.4c-150 0-284.5 129.3-284.5 227.6 0 98.3 134.5 227.6 284.5 227.6S796.5 471.9 796.5 384 662 156.4 512 156.4z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="add-circle-s" unicode="&#58978;" d="M512 1.5c-51.6 0-101.7 10.1-148.9 30.1-45.6 19.3-86.5 46.8-121.6 82-35.1 35.1-62.7 76-82 121.6-20 47.2-30.1 97.3-30.1 148.9s10.1 101.7 30.1 148.9c19.3 45.6 46.8 86.5 82 121.6 35.1 35.1 76 62.7 121.6 82 47.2 20 97.3 30.1 148.9 30.1s101.7-10.1 148.9-30.1c45.6-19.3 86.5-46.8 121.6-82 35.1-35.1 62.7-76 82-121.6 20-47.2 30.1-97.3 30.1-148.9s-10.1-101.7-30.1-148.9c-19.3-45.6-46.8-86.5-82-121.6-35.1-35.1-76-62.7-121.6-82-47.2-20-97.3-30.1-148.9-30.1z m-17.3 361.9v-205.8c0-11 9-20 20-20s20 9 20 20l-1 205.7h206.7c11 0 20 9 20 20s-9 20-20 20H534.7V609c0 11-9 20-20 20s-20-9-20-20v-205.7H289c-11 0-20-9-20-20s9-20 20-20l205.7 0.1z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bofang1" unicode="&#58908;" d="M514 781.7c-219.9 0-398.9-178.9-398.9-398.9 0.1-219.9 179-398.8 398.9-398.8 219.9 0 398.8 178.9 398.8 398.8S733.9 781.7 514 781.7z m173-421.9L437.1 215.5c-17.7-10.2-39.8 2.6-39.8 23V527.1c0 20.4 22.1 33.2 39.8 23L687 405.8c17.7-10.2 17.7-35.8 0-46z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bofang" unicode="&#58887;" d="M822.824 798.42H201.176c-57.196 0-103.595-46.398-103.595-103.595v-621.647c0-57.197 46.4-103.597 103.595-103.597h621.649c57.196 0 103.595 46.4 103.595 103.597V694.824c0 57.198-46.4 103.596-103.596 103.596zM356.607 176.853V591.149l362.54-207.108-362.54-207.188z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="detail" unicode="&#58948;" d="M800.111944 768.063968H223.888056C171.178411 768.063968 128.191904 725.077461 128.191904 671.856072V640.127936h767.616192v32.23988c0 52.709645-42.986507 95.696152-95.696152 95.696152m-167.852074 63.968016l14.328836-100.813593H377.411294l14.328836 100.813593h240.51974M639.936032 896H384.063968c-26.610695 0-51.174413-21.493253-54.756622-47.592204l-18.934532-134.076961c-3.582209-26.098951 14.84058-47.592204 41.451274-47.592204h319.84008c26.610695 0 45.033483 21.493253 41.451274 47.592204l-18.934532 134.076961C691.110445 874.506747 666.546727 896 639.936032 896m176.03998-319.84008H208.023988c-35.310345 0-61.409295-28.657671-58.338831-63.968016l52.197901-576.223888c3.070465-34.798601 34.798601-63.968016 69.597202-63.968016h480.015992c35.310345 0 66.526737 28.657671 69.597201 63.968016L873.803098 512.191904c3.582209 35.310345-22.516742 63.968016-57.827086 63.968016M384.063968 0.4477759999999762H287.856072L256.127936 448.223888h127.936032V0.4477759999999762z m191.904048 0h-127.936032V448.223888h127.936032V0.4477759999999762z m160.175912 0H639.936032V448.223888h127.936032l-31.728136-447.776112z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="Migration" unicode="&#58980;" d="M853.840124-52.46798899999999h-62.27438c-34.42119 0-62.274379 27.853189-62.274379 62.274379v746.806034c0 34.42119 27.853189 62.274379 62.274379 62.27438h62.27438c34.42119 0 62.274379-27.853189 62.274379-62.27438v-746.806034c-0.12163-34.42119-27.974819-62.274379-62.274379-62.274379z m-373.403017 373.403017H293.735598V445.483787h186.701509V569.910916l248.975887-186.701509-248.975887-186.701508V320.935028zM231.461219 258.782278h186.701508v-248.975888c0-34.42119-27.853189-62.274379-62.274379-62.274379H169.186839c-34.42119 0-62.274379 27.853189-62.274379 62.274379v746.806034c0 34.42119 27.853189 62.274379 62.274379 62.27438h186.701509c34.42119 0 62.274379-27.853189 62.274379-62.27438v-248.975888H231.461219v-248.854258z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zanting" unicode="&#59013;" d="M804.571429 896a146.285714 146.285714 0 0 0 146.285714-146.285714v-731.428572a146.285714 146.285714 0 1 0-292.571429 0V749.714286a146.285714 146.285714 0 0 0 146.285715 146.285714zM219.428571 896a146.285714 146.285714 0 0 0 146.285715-146.285714v-731.428572a146.285714 146.285714 0 1 0-292.571429 0V749.714286a146.285714 146.285714 0 0 0 146.285714 146.285714z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="zantingtingzhi" unicode="&#58947;" d="M720.896 800.768c-47.616 0-89.6-41.472-89.6-89.088v-655.36c0-47.616 41.984-89.088 89.6-89.088s89.6 41.472 89.6 89.088V711.68c-0.512 47.616-41.984 89.088-89.6 89.088z m-417.792 0c-47.616 0-89.6-41.472-89.6-89.088v-655.36c0-47.616 41.984-89.088 89.6-89.088s89.6 41.472 89.6 89.088V711.68c0 47.616-41.984 89.088-89.6 89.088z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiugai" unicode="&#58930;" d="M768.487 507.639L590.76 680.933 210.93 301.508l-66.201-242.161v-0.4L386.483 126.2zM739.523 829.38l-95.197-95.04 178.296-172.65 92.375 92.296c48.487 48.406 48.487 126.985 0 175.392-48.405 48.407-127.069 48.407-175.474 0.002zM79.029 17.29h872.333v-114.976H79.029z"  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/home/defaultImg.png
+++ b/src/assets/img/home/defaultImg.png
--- a/src/assets/img/home/del.png
+++ b/src/assets/img/home/del.png
--- a/src/assets/img/home/logo.png
+++ b/src/assets/img/home/logo.png
--- a/src/assets/img/home/look.png
+++ b/src/assets/img/home/look.png
--- a/src/assets/img/home/user.png
+++ b/src/assets/img/home/user.png
--- a/src/assets/img/login/233.png
+++ b/src/assets/img/login/233.png
--- a/src/assets/img/login/2333.png
+++ b/src/assets/img/login/2333.png
--- a/src/assets/img/map/back.png
+++ b/src/assets/img/map/back.png
--- a/src/assets/img/map/car.png
+++ b/src/assets/img/map/car.png
--- a/src/assets/img/map/catch.png
+++ b/src/assets/img/map/catch.png
--- a/src/assets/img/map/syn.png
+++ b/src/assets/img/map/syn.png
--- a/src/assets/img/map/total.png
+++ b/src/assets/img/map/total.png
--- a/src/assets/img/map/warn.png
+++ b/src/assets/img/map/warn.png
--- a/src/assets/img/taskmanage/del.png
+++ b/src/assets/img/taskmanage/del.png
--- a/src/assets/img/taskmanage/editb.png
+++ b/src/assets/img/taskmanage/editb.png
--- a/src/assets/img/taskmanage/editg.png
+++ b/src/assets/img/taskmanage/editg.png
--- a/src/assets/img/taskmanage/pause.png
+++ b/src/assets/img/taskmanage/pause.png
--- a/src/assets/img/taskmanage/pic1.png
+++ b/src/assets/img/taskmanage/pic1.png
--- a/src/assets/img/taskmanage/pic2.png
+++ b/src/assets/img/taskmanage/pic2.png
--- a/src/assets/img/taskmanage/pic3.png
+++ b/src/assets/img/taskmanage/pic3.png
--- a/src/assets/img/taskmanage/play.png
+++ b/src/assets/img/taskmanage/play.png
--- a/src/assets/img/taskmanage/weather.png
+++ b/src/assets/img/taskmanage/weather.png
--- a/src/assets/js/buildcodes.js
+++ b/src/assets/js/buildcodes.js
+import Vue from 'vue'
+class Codes {
+  constructor () {
+    this.allTypes = ['vehicle', 'xcycle', 'pflow', 'pedestrian']
+  }
+  /**
+   * INIT
+   * 初始化所需参数
+   * 返回得到的结果
+   */
+  getCodeList(name){
+	  console.log(JSON.parse(window.localStorage.getItem(name)))
+	 return JSON.parse(window.localStorage.getItem(name))
+  }
+  init (allData) {
+    this.cate = allData.event_cate
+    this.event_type = allData.event_type
+    this.allData = allData
+    this.result = {}
+    this.result = allData
+    this.classify();
+    return this.result
+  }
+  // 分类
+  classify () {
+    if (!this.allData) {
+      return ''
+    }
+    if (this.cate === 'traffic') {
+      this.trafficCode()
+    }
+    if (this.cate === 'behavior') {
+      this.beheiverCode()
+    }
+  }
+  // 安防事件处理
+  beheiverCode () {
+    this.publicCode()
+    console.log('安防事件')
+  }
+  // 交通事件处理
+  trafficCode () {
+    this.publicCode()
+    if (this.event_type === 'vehicle') {
+      this.vehicle()
+    }
+    if (this.event_type === 'xcycle' || this.event_type === 'pedestrian') {
+      this.xcycle()
+    }
+    if (this.event_type === 'pflow') {
+      this.pflow()
+    }
+  }
+  // *根据不同event_type做不同处理*
+  // 公共字段提取
+  publicCode () {
+    try {
+      // eslint-disable-next-line camelcase
+      let shoot_dt = this.timeForm(this.result.pics[0].shoot_dt, 'local').split(' ')
+      this.result.shoot_date = shoot_dt[0]
+      this.result.shoot_time = shoot_dt[1]
+    } catch (error) {
+      if (this.curType === 1) {
+        // eslint-disable-next-line camelcase
+        let shoot_dt = this.timeForm(this.result.event_dt, 'local').split(' ')
+        this.result.shoot_date = shoot_dt[0]
+        this.result.shoot_time = shoot_dt[1]
+      } else {
+        this.result.shoot_dt = '未识别'
+      }
+    }
+    // 时间
+    try {
+      this.result.event_dt = this.allData.event_dt
+    } catch (err) {
+      this.result.event_dt = ''
+    }
+    try {
+      this.result.location_speed = this.allData.event_data.speed
+    } catch (err) {
+      this.result.location_speed = ''
+    }
+  }
+  // 交通
+  vehicle () {
+	  try {
+	    if((this.allData.event_data.vehicle.body && this.allData.event_data.vehicle.body.type.special_type) || this.allData.event_data.vehicle.body.type.special_type == 0){
+	      if(this.allData.event_data.vehicle.body.type.special_type == 0){
+	        this.result.special_text = '正常车辆'
+	      }else if(this.allData.event_data.vehicle.body.type.special_type == 1){
+	         this.result.special_text = '车辆运输车'
+	      }else if(this.allData.event_data.vehicle.body.type.special_type ==2 ){
+	        this.result.special_text = '危险品运输车'
+	      }else if(this.allData.event_data.vehicle.body.type.special_type == 3){
+	        this.result.special_text = '救护车'
+	      }
+	    }else{
+	      	this.result.special_text  = '未知'
+	    }
+	  } catch (error) {
+	  		this.result.special_text  = '未知'
+	  }
+    try {
+      this.result.vehicle_plate_text = this.allData.event_data.vehicle.plate.text || '未识别'
+    } catch (err) {
+      this.result.vehicle_plate_text = '未识别'
+    }
+    // 违法类型
+    try {
+      this.result.illegalType = parseInt(this.allData.event_data.illegal.state) === 1 ? this.getCode('违法类型', this.allData.event_data.illegal.code) : '正常'
+    } catch (err) {
+      this.result.illegalType = '未识别'
+    }
+    try {
+      this.result.location_name = this.allData.event_data.location.name === '' ? '无' : this.allData.event_data.location.name
+    } catch (e) {
+      this.result.location_name = '未识别'
+    }
+    try {
+      this.result.vehicle_body_type_text = this.getCode('车辆类型', this.allData.event_data.vehicle.body.type.code)
+    } catch (err) {
+      this.result.vehicle_body_type_text = '未识别'
+    }
+    try {
+      this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.allData.event_data.vehicle.body.logo.code)
+    } catch (err) {
+      this.result.vehicle_body_logo_text = '未识别'
+    }
+    try {
+      this.result.plate_type_text = this.getCode('号牌类型', this.allData.event_data.vehicle.plate.type_code)
+    } catch (err) {
+      this.result.plate_type_text = '未识别'
+    }
+    try {
+      this.result.vehicle_body_color_text = this.getCode('车身颜色', this.allData.event_data.vehicle.body.color.code)
+    } catch (err) {
+      this.result.vehicle_body_color_text = '未识别'
+    }
+	let ary = []
+	try {
+		if(this.allData.event_data.RefinedFeature.rAnnualInspection) {
+			ary.push('年检标志')
+		}
+	} catch(e) {
+		console.log('年检标志无')
+	}
+	try {
+		if(this.allData.event_data.RefinedFeature.rDecoration) {
+			ary.push('摆件')
+		}
+	} catch(e) {
+		console.log('摆件无')
+	}
+	try {
+		if(this.allData.event_data.RefinedFeature.rPendant) {
+			ary.push('吊坠')
+		}
+	} catch(e) {
+		console.log('吊坠无')
+	}
+	try {
+		if(this.allData.event_data.RefinedFeature.rSunshading) {
+			ary.push('遮阳板')
+		}
+	} catch(e) {
+		console.log('遮阳板无')
+	}
+	if(ary.length) {
+		this.result.RefinedFeature_text = ary.join('')
+	} else {
+		this.result.RefinedFeature_text = '未识别'
+	}
+  }
+  // 非机动车
+  xcycle () {
+    // 性别
+    try {
+      switch (this.allData.event_data.driver.face[0].sex) {
+        case '1':
+          this.result.driver_face_sex = '男'
+          break
+        case '2':
+          this.result.driver_face_sex = '女'
+          break
+        case '0':
+          this.result.driver_face_sex = '不确定'
+          break
+        default:
+          break
+      }
+    } catch (err) {
+      this.result.driver_face_sex = '未识别'
+    }
+    // 身高
+    try {
+      this.result.pedestrian_height = this.allData.event_data.pedestrian.height.toFixed(2)
+    } catch (err) {
+      this.result.pedestrian_height = '未识别'
+    }
+    // 是否戴帽子
+    try {
+      switch (this.allData.event_data.driver.face[0].with_hats) {
+        case 0:
+          this.result.driver_face_with_hats = '不确定'
+          break
+        case 1:
+          this.result.driver_face_with_hats = '戴帽子'
+          break
+        case 2:
+          this.result.driver_face_with_hats = '未戴帽'
+          break
+        default:
+          break
+      }
+    } catch (err) {
+      this.result.driver_face_with_hats = '未识别'
+    }
+    // 车辆颜色
+    try {
+      this.result.xcycle_color_type = this.allData.event_data.xcycle.color.name || '未识别'
+    } catch (error) {
+      this.result.xcycle_color_type = '未识别'
+    }
+    // 行人上身颜色
+    try {
+      this.result.driver_face_upbody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].upbody.code)
+    } catch (err) {
+      this.result.driver_face_upbody_text = '未识别'
+    }
+    // 行人下身颜色
+    try {
+      this.result.driver_face_lobody_text = this.getCode('车身颜色', this.allData.event_data.driver.face[0].lobody.code)
+    } catch (err) {
+      this.result.driver_face_lobody_text = '未识别'
+    }
+    // 车辆品牌
+    try {
+      this.result.vehicle_body_logo_text = this.getCode('车辆品牌', this.result.event_data.vehicle.body.logo.code)
+    } catch (err) {
+      this.result.vehicle_body_logo_text = '未识别'
+    }
+    // 地点名称
+    try {
+      this.allData.location_name = this.allData.event_this.allData.location.name === '' ? '无' : this.allData.event_this.allData.location.name
+    } catch (e) {
+      this.allData.location_name = '未识别'
+    }
+    // 骑车类型
+    try {
+      switch (this.allData.event_this.allData.xcycle_type) {
+        case 'motorcycle':
+          this.allData.xcycle_type_text = '摩托车'
+          break
+        case 'bicycle':
+          this.allData.xcycle_type_text = '自行车'
+          break
+        case 'tricycle':
+          this.allData.xcycle_type_text = '三轮车'
+          break
+        default:
+          break
+      }
+    } catch (err) {
+      this.allData.xcycle_type_text = '未识别'
+    }
+    try {
+      if (this.allData.xcycle_type_text === '自行车') {
+        this.allData.company = this.allData.event_this.allData.xcycle.company.name
+      } else if (this.allData.xcycle_type_text === '摩托车') {
+        if (typeof (this.allData.event_this.allData.xcycle.company.code) !== 'number') {
+          this.allData.company = '未识别'
+        } else {
+          this.allData.company = this.getCode('外卖公司', this.allData.event_this.allData.xcycle.company.code)
+        }
+      } else if (this.allData.xcycle_type_text === '三轮车') {
+        if (typeof (this.allData.event_this.allData.xcycle.company.code) !== 'number') {
+          this.allData.company = '未识别'
+        } else {
+          this.allData.company = this.getCode('快递公司', this.allData.event_this.allData.xcycle.company.code)
+        }
+      } else {
+        this.allData.company = '无'
+      }
+    } catch (error) {
+      this.allData.company = '未识别'
+    }
+  }
+  // 客流
+  pflow () {
+
+  }
+  /**
+   * buildError
+   */
+  buildError () {
+    throw new Error('检测字段是否存在')
+  }
+  getCode (codeName, code) {
+    var name = window.localStorage.getItem(codeName + '-' + code)
+    name = name || ''
+    return name
+  }
+  /**
+   * timerfrom
+   */
+  timeForm (time, str, boo) {
+    var bjTime
+    if (time === undefined || time === '') {
+      bjTime = new Date()
+    } else if (str === 'local') {
+      try {
+        // 兼容
+        var _dayTime = time.split(' ')
+        var d = _dayTime[0].split('-')
+        var mi = _dayTime[_dayTime.length - 1].split(':')
+        bjTime = new Date()
+        // 给date赋值年月日
+        bjTime.setUTCFullYear(d[0], d[1] - 1, d[2])
+        // 给date赋值时分秒
+        bjTime.setUTCHours(mi[0] - 8, mi[1], mi[2])
+      } catch (err) {
+        // console.log('转化本地时间异常:', err.message);
+        bjTime = new Date(time)
+      }
+      if (boo) {
+        bjTime = new Date(bjTime.getTime() + 28800000 - 86400000)
+      } else {
+        bjTime = new Date(bjTime.getTime() + 28800000)
+      }
+    } else if (str === 'utc') {
+      if (typeof time === 'object') {
+        if (boo) {
+          bjTime = new Date(time.getTime() - 28800000 + 1000)
+        } else {
+          bjTime = new Date(time.getTime() - 28800000)
+        }
+      } else {
+        if (boo) {
+          bjTime = new Date(new Date(time).getTime() - 28800000 + 1000)
+        } else {
+          bjTime = new Date(new Date(time).getTime() - 28800000)
+        }
+      }
+    } else {
+      bjTime = new Date(time)
+    }
+    var standardTime = [
+      [bjTime.getFullYear(), bjTime.getMonth() + 1, bjTime.getDate()].join('-'), [bjTime.getHours(), bjTime.getMinutes(), bjTime.getSeconds()].join(':')
+    ].join(' ').replace(/(?=\b\d\b)/g, '0')
+    return standardTime
+  }
+}
+
+export let buildCode = new Codes()
--- a/src/assets/resetElementCss/index.css
+++ b/src/assets/resetElementCss/index.css
+.el-main{
+	padding: 0;
+}
+.el-menu{
+	height: 100%;
+}
+/* 输入框重置 */
+.el-input--small .el-input__inner {
+    height: 30px;
+    line-height: 30px;
+}
+.el-input__inner{
+	border: 1px solid #E5E5E5;
+}
+.el-input.is-active .el-input__inner, .el-input__inner:focus{
+	border-color: #3BB7FF;
+}
+/* 下拉框重置 */
+.el-select .el-input.is-focus .el-input__inner{
+	border-color: #3BB7FF;
+}
+.el-popper[x-placement^=bottom] .popper__arrow{
+	display: none;
+}
+.el-popper[x-placement^=bottom]{
+	margin-top: 0;
+	left:0!important;
+}
+.el-select-dropdown__list{
+	padding: 4px 0;
+}
+.el-select-dropdown{
+	    border-radius: 2px;
+}
+.el-select-dropdown__item.selected{
+	color: #555555;
+	    font-weight: 400;
+}
+.el-select-dropdown__item.hover{
+	    color: #ffffff;
+}
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+	background: #3BB7FF;
+}
+.el-select-dropdown__item{
+	height: 26px;
+	    line-height: 26px;
+		padding: 0 10px;
+}
+.el-input__inner{
+	border-radius: 2px;
+	padding: 0 10px;
+}
+/* button重置 */
+.el-button--mini, .el-button--small{
+	border-radius:2px ;
+}
+.el-button--small, .el-button--small.is-round {
+    padding: 7px 16px;
+}
+/* 主要按钮 */
+.el-button--primary{
+	background-color: #0069FF;
+	border-color: #0069FF;
+}
+/* 信息按钮 */
+.el-button--info {
+    color: #FFF;
+    background-color: #3BB7FF;
+    border-color: #3BB7FF;
+}
+.el-button--info:focus, .el-button--info:hover {
+    background: red;
+    border-color: red;
+    color: #FFF;
+}
+.el-button--info.is-active, .el-button--info:active{
+	background: green;
+	border-color: green;
+	color: #FFF;
+}
+/* 分页 */
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
+	     margin: 0 ; 
+	    background-color: #fff;
+	    color: #606266;
+	    border: 1px solid #e5e5e5;
+	    min-width: 30px;
+	    border-radius: 1px;
+	    border-right: none;
+		padding: 0 16px;
+		height: 35px;
+		line-height: 35px;
+}
+.el-pagination.is-background .btn-next{
+	 border-right: 1px solid #e5e5e5;
+}
+.el-pagination button, .el-pagination span:not([class*=suffix]){
+	height: 35px;
+	    line-height: 35px;
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active{
+	background-color:#0069FF
+}
+.el-input--mini .el-input__inner {
+    height: 35px;
+    line-height: 35px;
+}
+.el-pagination .el-select .el-input .el-input__inner{
+	border-radius: 2px;
+}
+/* 表格 */
+.el-table--small td, .el-table--small th{
+	padding: 8px 0;
+}
+.el-table--mini, .el-table--small, .el-table__expand-icon{
+	font-size: 14px;
+}
+.el-table__body tr{
+	background: #E5E5E5;
+}
+.el-table--striped .el-table__body tr.el-table__row--striped td{
+	background: #FFFFFF;
+}
+/* 提示 */
+.el-tooltip__popper{
+	padding: 6px 12px;
+	border-radius:2px;
+}
+.el-tooltip__popper.is-light{
+	background:rgba(255,255,255,1);
+	box-shadow:0px 2px 4px 0px rgba(0,0,0,0.13);
+	border: none;
+	color: #666666;
+}
+/* dialog */
+.el-dialog__title{
+	font-size: 15px;
+	color: #FFFFFF;
+}
+.el-dialog__header{
+	padding:8px 20px 6px;
+	background: #3BB7FF;
+}
+.el-dialog__headerbtn{
+	top: 12px;
+}
+.el-dialog__headerbtn .el-dialog__close{
+	color: #FFFFFF;
+}
+.el-dialog__footer{
+	background:#F6F6F6 ;
+}
+.dialog-footer .el-button--small {
+    padding: 9px 17px;
+	font-size: 14px;
+}
+.el-dialog__footer {
+    padding: 8px 27px 8px;
+}
+/* dialog元素 */
+.el-dialog .el-input--small .el-input__inner{
+	    height: 26px;
+	    line-height: 26px;
+}
+.el-dialog__body{
+	padding: 30px 34px;
+}
+.el-dialog .el-select--small{
+	width: 100%;
+}
+/* .el-dialog .el-form-item--small .el-form-item__content,.el-dialog .el-form-item--small .el-form-item__label{
+	line-height: 26px;
+} */
+.el-switch__core{
+	height: 13px;
+}
+.el-switch__core:after{
+	width: 9px;
+	height: 9px;
+}
+.el-switch.is-checked .el-switch__core::after {
+    left: 100%;
+    margin-left: -10px;
+}
+.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+margin-bottom: 4px;
+}
\ No newline at end of file
--- a/src/assets/scss/common.scss
+++ b/src/assets/scss/common.scss
+$main-color:#0069FF;
+$font-color:#555555;
+$white-font-color:#ffffff;
+$white-back-color:#ffffff;
+$bodyback-color:#f5f7f9;
+$border-color:#e5e5e5;
+$title-color:#f4f4f4;
+$title-backgroud:#f3f3f3;
+$dialog-title:#3BB7FF;
+body{
+	margin: 0;
+	color: $font-color;
+	font-family: "微软雅黑";
+	font-size: 14px;
+	background: $bodyback-color;
+}
+input{
+	font-family: "微软雅黑";
+}
+a:link{
+text-decoration:none;
+ /* 指正常的未被访问过的链接*/
+}
+a:visited{
+    text-decoration:none;
+     /*指已经访问过的链接*/
+}a:hover{
+     text-decoration:none;
+     /*指鼠标在链接*/
+}
+a:active{
+    text-decoration:none;
+    /* 指正在点的链接*/
+}
+.inputBox{
+	display: inline-block;
+	width: 150px;
+}
+.innnerBox{
+	padding: 10px;background: #FFFFFF;margin: 10px;
+}
+.selectBox{
+	width:150px;
+	display: inline-block;
+}
+.blue{
+	.tableSpanBorder{
+		display: inline-block;
+		height: 18px;
+		border-left:2px solid #E5E5E5;
+		margin: 0 17px;
+		position: relative;
+		top:3px;
+	}
+	.headers{
+		background: $main-color;
+		line-height: 65px;
+		height: 65px;
+	}
+	.logoImg{
+		width: 136px;
+		margin-top: 14px;
+	}
+	.headRight{
+		float: right;
+		span{
+			color:$white-font-color
+		}
+		img{
+			position: relative;
+			top: 10px;
+			width: 32px;
+			margin-left: 72px;
+		}
+		.exit{
+			margin:{
+				right: 90px;
+				left: 12px;
+			}
+			cursor: pointer;
+		}
+	}
+	.nav{
+		height:40px;
+		background: $white-back-color;
+	}
+	.contentBox{
+		padding: 12px;
+	}
+}
+.detaiCon span{
+	display: inline-block;
+	width: 120px;
+}
+.arrow{
+	position: absolute;
+	font-size: 38px;
+	top: 43%;
+	cursor: pointer;
+	color:$dialog-title;
+}
+.leftArrow{
+	 @extend .arrow;
+	left: -27px;
+}
+.rightArrow{
+	 @extend .arrow;
+	right: -27px;
+}
--- 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-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</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-mocha"
+          target="_blank"
+          rel="noopener"
+          >unit-mocha</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="scss">
+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/components/ocxplay.vue
+++ b/src/components/ocxplay.vue
+<template>
+	<div style="width: 100%;height: 100%;position: relative;">
+		<p style="position: absolute;top: 113px;z-index: 99;text-align: center;width: 100%;" v-if="noIE">请选择IE9以上版本查看视频！</p>
+		<object v-show="videoShow" id="nvrTotalOcx" name="nvrTotalOcx"
+			classid="CLSID:96DFBBAF-4220-4978-9681-4ABA534A7718"
+			codebase="./static/OcxInstall/VionNvrVideoInstall.exe#version=1,0,24"
+			style="width: 100%; height:100%;">
+			<param name="BorderStyle" value="1" />
+			<param name="MousePointer" value="0" />
+			<param name="Enabled" value="1" />
+			<param name="Min" value="0" />
+			<param name="Max" value="10" />
+			<embed wmode="opaque"/>
+			<param name="wmode" value="transparent"/>
+		</object>
+		<!--安装弹框-->
+		<el-dialog title="提示" :visible.sync="stepDialogVisible" width='252px' :close-on-click-modal='false' @close="stepClose">
+			<span>本网站需要安装视频插件才可正常使用，请安装完成后请手动重启浏览器</span>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="stepDialogVisible = false">关闭</el-button>
+		  </div>
+		</el-dialog>
+		<!--更新弹框-->
+		<el-dialog title="提示" :visible.sync="updateDialogVisible" width='252px' :close-on-click-modal='false' @close="stepClose">
+			<span>该网站当前视频插件版本为{{currentVersion}}，可能导致部分功能不完善，请更新到最新版本1.0.33</span>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="updateDialogVisible = false">关闭</el-button>
+		  </div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				videoShow:true,
+				noIE:false,
+				currentVersion:0,
+				updateDialogVisible:false,
+				stepDialogVisible:false
+			}
+		},
+		mounted(){
+			setTimeout(()=>{
+				this.initVideo();
+			},300)
+		},
+		methods:{
+			stepClose(){
+				this.videoShow=true;
+			},
+			initVideo(){
+				var  ieVer=this.IEVersion();
+				if(ieVer==7||ieVer==8||ieVer==6||ieVer=='-1'){
+					this.noIE=true
+				}else{
+					this.noIE=false
+					try{
+						this.currentVersion=document.getElementById('nvrTotalOcx').GetOcxVersion();
+						var versionArr=this.currentVersion.split('.');
+						var versionNum=0;
+						versionArr.forEach((item,index,arr)=>{
+							versionNum=versionNum+Number(item);
+						})
+						if(versionNum<34){
+							this.videoShow=false;
+			  			this.updateDialogVisible=true;
+						window.open('./OcxInstall/NvrVideoInstall_1.0.33.exe')
+						}
+					}catch(e){
+						this.videoShow=false;
+						this.stepDialogVisible=true;
+					window.open('./OcxInstall/NvrVideoInstall_1.0.33.exe')
+					return false
+					}
+				}
+				if(typeof nvrTotalOcx != 'undefined'){
+					var testStr = 'Null';
+					nvrTotalOcx.Init(0, testStr, 1);
+					nvrTotalOcx.SetSingleWindow(true);
+					nvrTotalOcx.SetParam("VideoSize", 0);
+					var medianame = '视频0';
+					 // var hostname = window.location.hostname;
+					 var hostname = '192.168.9.120';
+					 var port=8554;
+					 var url = "rtsp://"+hostname+":"+port+"/ch0";
+					nvrTotalOcx.PlayRealVideo(url,1,'video',hostname,0);
+					window.onbeforeunload=function(){
+						nvrTotalOcx.CloseVideoByChannelnum(1)
+					}
+					
+				}
+			},
+			IEVersion() {
+			      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
+			      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
+			      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
+			      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
+			      if(isIE) {
+			          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
+			          reIE.test(userAgent);
+			          var fIEVersion = parseFloat(RegExp["$1"]);
+			          if(fIEVersion == 7) {
+			              return 7;
+			          } else if(fIEVersion == 8) {
+			              return 8;
+			          } else if(fIEVersion == 9) {
+			              return 9;
+			          } else if(fIEVersion == 10) {
+			              return 10;
+			          } else {
+			              return 6;//IE版本<=7
+			          }   
+			      } else if(isEdge) {
+			          return 'edge';//edge
+			      } else if(isIE11) {
+			          return 11; //IE11  
+			      }else{
+			          return -1;//不是ie浏览器
+			      }
+			  },
+			  hideHanlde(){
+				  this.videoShow=false;
+			  },
+			  showHanlde(){
+				  this.videoShow=true;
+			  }
+		}
+	}
+</script>
+
+<style>
+</style>
--- a/src/main.js
+++ b/src/main.js
+import Vue from "vue";
+import App from "./App.vue";
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import router from "./router";
+import store from "./store";
+import resetCss from './assets/resetElementCss/index.css'
+import api from './api/install'
+import echarts from 'echarts'
+import './assets/icon/iconfont.css'
+import moment from 'moment'
+import {buildCode} from './assets/js/buildcodes.js'
+Vue.prototype.$echarts = echarts;
+Vue.prototype.$moment = moment;
+Vue.prototype.$buildCode = buildCode;
+Vue.use(api)
+Vue.use(ElementUI, { size: 'small', zIndex: 3000 });
+Vue.use(resetCss);
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");
--- a/src/router/index.js
+++ b/src/router/index.js
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+     component: resolve => require(['../views/Home.vue'], resolve),
+	 children:[
+		 {
+			 path: "/map",
+			 name: "mapShow",
+			  component: resolve => require(['../views/mapShow/index.vue'], resolve),
+		 },
+		 {
+			 path: "/task/sceneSet",
+			 name: "sceneSet",
+			  component: resolve => require(['../views/sceneManage/index.vue'], resolve),
+		 },
+		 {
+			 path: "/task/taskSet",
+			 name: "taskSet",
+			  component: resolve => require(['../views/taskManage/index.vue'], resolve),
+		 },
+		 {
+			 path: "/search/vehicleSearch",
+			 name: "taskSet",
+			  component: resolve => require(['../views/search/vehicleSearch.vue'], resolve),
+		 }
+	 ]
+  },
+  {
+    path: "/login",
+    name: "login",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+      component: resolve => require(['../views/Login.vue'], resolve)
+  }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes
+});
+
+export default router;
--- a/src/store/actions.js
+++ b/src/store/actions.js
+// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
+import types from './types'
+
+const actions= {
+    incrementAsync({ commit, state }) {
+        // 异步操作
+        var p = new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve()
+            }, 3000);
+        });
+        p.then(() => {
+            commit(types.INCREMENT);
+        }).catch(() => {
+            console.log('异步操作');
+        })
+    }
+}
+// 最后导出
+export default actions;
\ No newline at end of file
--- a/src/store/getters.js
+++ b/src/store/getters.js
+// 因为数据从 user.js 中获取，所以需要引入该文件
+import user from './modules/login'
+
+const getters = {
+    isEvenOrOdd(state){
+        // 注意数据是从 user.js 中获取的，所以写成 user.state.count
+        return user.state.count % 2 == 0 ? "偶数" : "奇数"
+    }
+}
+// 并导出
+export default getters;
\ No newline at end of file
--- a/src/store/index.js
+++ b/src/store/index.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+import getters from './getters'
+import actions from './actions'
+import users from './modules/login'
+// 导出 store 对象
+export default new Vuex.Store({
+    getters,
+    actions,
+    modules:{
+        users
+    }
+})
\ No newline at end of file
--- a/src/store/modules/login.js
+++ b/src/store/modules/login.js
+// 导入 types.js 文件
+import types from "./../types";
+
+const state ={
+	atoken:'',
+	algolist:[],
+	storeconfslist:[],
+    count:5
+}
+// 定义 getters
+var getters ={
+    count(state){
+        return state.count
+    }
+}
+const actions ={
+    increment({ commit, state }){
+        // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应
+        //与原来 commit('increment') 的原理相同，只是把类型名换成了常量
+        commit(types.INCREMENT)
+    },
+    decrement({commit,state}){
+        if (state.count>10) {
+            // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
+            commit(types.DECREMENT)
+        }
+    }
+}
+
+const mutations ={
+    // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
+    [types.INCREMENT](state){
+        state.count++
+    },
+    // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
+    [types.DECREMENT](state){
+        state.count--
+    },
+	[types.ATOKEN](state,atoken){
+		state.atoken=atoken;
+	},
+	[types.ALGO](state,list){
+		state.algolist=list;
+	},
+	[types.STORECONF](state,list){
+		state.storeconfslist=list;
+	}
+}
+// 最后统一导出
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file
--- a/src/store/types.js
+++ b/src/store/types.js
+//定义常量，使用常量替代 mutation 事件类型
+const INCREMENT = 'INCREMENT'
+const DECREMENT = 'DECREMENT'
+const ATOKEN = 'ATOKEN'
+const ALGO = 'ALGO'
+const STORECONF = 'STORECONF'
+export default {
+    INCREMENT,
+    DECREMENT,
+	ATOKEN,
+	ALGO,
+	STORECONF
+}
\ No newline at end of file
--- 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/Home.vue
+++ b/src/views/Home.vue
+<template>
+  <div class="home">
+    <el-container>
+      <el-header class="headers">
+		  <img class="logoImg" src="../assets/img/home/logo.png" alt="">
+		  <div class="headRight">
+			  <span>2019-11-15 16:50 星期一</span>
+			  <img src="../assets/img/home/user.png" alt="">
+			  <span class="exit">退出<i class="el-icon-arrow-down"></i></span>
+		  </div>
+	  </el-header>
+      <el-container style="min-height:calc(100vh - 64px);">
+        <el-aside width="254px">
+			<el-menu default-active="/map" class="el-menu-vertical-demo" :collapse="isCollapse"  @select="handleSelect">
+			  <el-submenu index="1">
+			    <template slot="title">
+			      <i class="el-icon-location"></i>
+			      <span slot="title">首页</span>
+			    </template>
+			      <el-menu-item index="/map"> <i class="el-icon-location"></i>地图展示</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="2">
+			    <template slot="title">
+			      <i class="el-icon-location"></i>
+			      <span slot="title">任务管理</span>
+			    </template>
+				<el-menu-item index="/task/sceneSet"> <i class="el-icon-location"></i>场景配置</el-menu-item>
+			      <el-menu-item index="/task/taskSet"> <i class="el-icon-location"></i>任务配置</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="3">
+			    <template slot="title">
+			      <i class="el-icon-document"></i>
+			      <span slot="title">智能检索</span>
+			    </template>
+				<el-menu-item index="/search/vehicleSearch"> <i class="el-icon-location"></i>过车记录检索</el-menu-item>
+			  </el-submenu>
+			  <el-submenu index="4">
+			    <template slot="title">
+			      <i class="el-icon-document"></i>
+			      <span slot="title">资源管理</span>
+			    </template>
+			  </el-submenu>
+			</el-menu>
+		</el-aside>
+        <el-main>
+			<div class="nav"></div>
+			<router-view></router-view>
+		</el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+// import HelloWorld from "@/components/HelloWorld.vue";
+
+export default {
+  name: "home",
+  data(){
+	  return{
+		    isCollapse: false,
+			conHeight:0
+	  };
+  },
+  created(){
+	  this.$router.push('/map')
+  },
+  mounted(){
+	  this.conHeight=window.innerHeight-65;
+	  console.log(this.conHeight)
+  },
+  components: {
+    // HelloWorld
+  },
+  methods:{
+	   handleSelect(key, keyPath) {
+		   this.$router.push(key)
+		  console.log(key, keyPath);
+		}
+  }
+};
+</script>
\ No newline at end of file
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
+<template>
+	<div id="login" :style="{height:innerHeight+'px'}">
+		<h1>视频分析综合管理平台</h1>
+		<div class="form-horizontal">
+			<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-8">
+					<input type="text" class="form-control" v-model="username" id="username" placeholder="请输入用户名">
+				</div>
+			</div>
+			<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-8">
+					<input type="password" class="form-control" v-model="password" id="password" placeholder="请输入密码">
+				</div>
+			</div>
+			<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-8">
+					<button class="btn" @click.stop="login">登录</button>
+				</div>
+			</div>
+			<!--<div class="form-group">
+				<div class="col-sm-offset-2 col-sm-8">
+					<p>北京文安智能技术股份有限公司</p>
+					<p>v2.0.0.1</p>
+				</div>
+			</div>-->
+		</div>
+	</div>
+</template>
+
+<script>
+let sha1 = require('js-sha1');
+import types from '../store/types.js'
+	export default {
+		name: 'Login',
+		data() {
+			return {
+				username: '',
+				password: '',
+				innerHeight:0
+			}
+		},
+		methods: {
+			initHeight(){
+				this.innerHeight=window.innerHeight;
+			},
+			login(){
+				this.$api.login.login({
+						user_name: this.username,
+						// user_password: this.password
+						user_password: sha1(this.password),
+					}).then(res => {
+					if(!res.ecode){
+						this.$store.commit(types.ATOKEN,res.token);
+						// localStorage.setItem('rtoken',m.data.rtoken)
+      //       localStorage.setItem('user_unid',m.data.role_unid)
+      //       localStorage.setItem('uid',m.data.unid)
+            // localStorage.setItem('menu', JSON.stringify(m.data.menu_list))
+						// localStorage.setItem('user_name',this.username)
+            // localStorage.setItem('client_unid',new Date().getTime() + Math.round(Math.random() * 10000000000000))
+            // localStorage.setItem('past_timer',new Date().getTime() + 24*60*60*10000)
+						// 处理登录用户权限菜单显示问题;
+						//算法配置列表
+						this.algoList();
+						//存储配置列表
+						this.storeConfList();
+						//code列表
+						this.getCodeList();
+						this.$router.push('/map')
+					}
+
+				}).catch((err) => {
+				})
+			},
+			algoList() {
+				this.$api.login.algocombs({
+					limit: '',
+					algo_set: 'video'
+				}).then(res => {
+					if(!res.ecode){
+						this.$store.commit(types.ALGO,res.list_data);
+					}
+				}).catch((err) => {
+				})
+			},
+			storeConfList(){
+				this.$api.login.storeconfs({
+					offset: 0,
+					limit: ''
+				}).then(res => {
+					if(!res.ecode){
+						this.$store.commit(types.STORECONF,res.list_data);
+					}
+				}).catch((err) => {
+				})
+			},
+			getCodeList(){
+				this.$api.login.cates().then(res => {
+					res.list_data.forEach(item=>{
+						this.$api.login.codes({
+						},item.cate_unid).then(res => {
+							// 存储code列表
+								window.localStorage.setItem(item.name,JSON.stringify(res.list_data))
+								// 存储单独code
+								res.list_data.forEach(chilItem=>{
+									window.localStorage.setItem(item.name+'-'+chilItem.code,chilItem.name)
+								})
+						}).catch((err) => {
+						})
+					})
+				}).catch((err) => {
+				})
+			}
+		},
+		watch: {},
+		mounted() {
+		},
+		created() {
+			this.initHeight();
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.loginTitle{
+		height:60px;
+		background: #dcdcdc;
+		position: relative;
+	}
+	.loginTitle>div{
+		position: absolute;
+		text-align: left;
+		/*left: 5%;*/
+		height: 60px;
+		/*margin-top: 15px;*/
+		/*background: url(../assets/daer.jpg) no-repeat;*/
+		padding-left: 50px;
+		background-size: 100% 60px;
+		width:150px
+	}
+	.loginTitle>div span:first-child{
+		position: absolute;
+		left:50px;
+		top: -5px;
+		font-weight: bold;
+		font-size: 18px;
+		font-family: "隶书";
+	}
+	.loginTitle>div span:last-child{
+		font-weight: 500;
+		font-size: 12px;
+		font-family: Aparajita;
+		position: absolute;
+		left:50px;
+		top: 16px;
+	}
+	.form-horizontal {
+		width: 450px;
+		height: 350px;
+		background: url(../assets/img/login/233.png) no-repeat;
+		background-size: 500px 430px;
+		position: absolute;
+		left: 58%;
+		top: 200px;
+		padding-top:50px;
+		border-radius: 10px;
+	}
+
+	h1 {
+		color: #F5F5F5;
+		height: 40px;
+		line-height: 40px;
+		padding: 60px 0px;
+		position: absolute;
+		left:10%;
+		top:220px;
+		font-size:50px;
+		letter-spacing: 8px;
+		text-shadow: 5px 5px 5px #000
+	}
+
+	#login {
+		text-align: center;
+		position: relative;
+		background: url(../assets/img/login/2333.png) no-repeat 0 0;
+		background-size:cover
+	}
+	#login input {
+		color: #fff;
+		background: rgba(255,255,255,.5);
+		border-radius: 0;
+		border: none;
+		border: 1px solid #86B1DB;
+		box-shadow: none;
+		margin-top: 20px;
+		height: 40px;
+		/* line-height: 40px; */
+		border-radius: 5px;
+		font-size: 16px;
+	}
+
+	#login input:focus {
+		outline: none;
+		box-shadow: none;
+	}
+
+	button {
+		width: 60%;
+		margin-top: 40px;
+		background: #09cef7;
+		color: #fff!important;
+		height: 40px;
+		font-size: 20px;
+	}
+
+	button:hover {
+		color: #D6D9DF
+	}
+
+	p {
+		color: #fff;
+		margin: 0;
+	}
+
+	p:nth-child(1) {
+		padding-top: 15px
+	}
+</style>
--- a/src/views/mapShow/index.vue
+++ b/src/views/mapShow/index.vue
+<template>
+	<div style="padding: 12px;">
+		<div style="float: left;">
+			<div class="infoBox">
+				<div class="infoChild">
+					<img src="../../assets/img/map/syn.png" alt="">
+					<span class="textCon">
+						<div>分析资源</div>
+						<div class="colorText"><span>64</span>路</div>
+					</span>
+				</div>
+				<div class="infoChild">
+					<img src="../../assets/img/map/car.png" alt="">
+					<span class="textCon">
+						<div>运行路数</div>
+						<div class="colorText"><span>47</span>路</div>
+					</span>
+				</div>
+				<div class="infoChild">
+					<img src="../../assets/img/map/warn.png" alt="">
+					<span class="textCon">
+						<div>运行异常资源</div>
+						<div class="colorText"><span>7</span>个</div>
+					</span>
+				</div>
+				<div class="infoChild">
+					<img src="../../assets/img/map/total.png" alt="">
+					<span class="textCon">
+						<div>数量总数</div>
+						<div class="colorText"><span>23548</span>路</div>
+					</span>
+				</div>
+			</div>
+			<div id="map" class="maps">
+				<div class="inMapBox">
+					<div class="lDiv" :key="index" v-for="(item,index) in typeList">
+						<span class="ltext">{{item.event_name}}</span>
+						<span class="lnum">{{item.total_num}}</span>
+						<div style="clear: both;"></div>
+					</div>
+				</div>
+			</div>
+			<div>
+				<div style="float: left; margin-right: 8px;">
+					<div class="numBox">
+						<div class="title">今日抓拍量</div>
+						<span class="num">{{snap_num}}</span>
+						<img src="../../assets/img/map/catch.png" alt="" class="catch">
+					</div>
+					<div class="numBox">
+						<div class="title">今日审核量</div>
+						<span class="num">{{audit_num}}</span>
+						<img src="../../assets/img/map/back.png" alt="" class="backSea">
+					</div>
+				</div>
+				<div style="float: left;background: #FFFFFF;">
+					<div class="title">今日事件趋势</div>
+					<div id="myChart" style="width: 523px; height: 224px;"></div>
+				</div>
+			</div>
+			<div style="clear: both;"></div>
+		</div>
+		<div style="float: left;">
+			<div style="width: 789px;height: 446px;position: relative;margin-bottom: 11px;">
+				<ocxplay ref="ocx"></ocxplay>
+			</div>
+			<div style="background: #FFFFFF;width: 789px">
+				<div class="title">实时事件</div>
+				<el-table
+				  height="349"
+				      :data="tableData"
+				      style="width: 100%;padding: 11px;">
+					  <el-table-column
+					    type="index"
+						align="center"
+					    label="序号">
+					  </el-table-column>
+				      <el-table-column
+					  align="center"
+				        prop="eventType"
+				        label="事件类型"
+						:formatter="eventFormatter">
+				      </el-table-column>
+				      <el-table-column
+					  align="center"
+				        prop="locationName"
+				        label="地点名称">
+				      </el-table-column>
+					  <el-table-column
+						  align="center"
+					    prop="startDt"
+						width="180"
+					    label="首次抓拍时间">
+					  </el-table-column>
+					  <el-table-column
+						  align="center"
+					    prop="endDt"
+						width="180"
+					    label="最后抓拍时间">
+					  </el-table-column>
+					  <el-table-column
+						  align="center"
+					    prop="operation"
+					    label="操作">
+						<template slot-scope="scope">
+							<el-tooltip content="详情及审核" placement="bottom" effect="light" :visible-arrow=false>
+								<img src="../../assets/img/home/look.png" alt="" class="edit"  @click="editVideo(scope.$index, scope.row)">
+							</el-tooltip>
+							<span class="tableSpanBorder"></span>
+							<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
+								<img src="../../assets/img/home/del.png" alt="" class="del"  @click="delFun(scope.$index, scope.row)">
+							</el-tooltip>
+						</template>
+					  </el-table-column>
+				    </el-table>
+			</div>
+			<div style="clear: both;"></div>
+		</div>
+		
+		<editset :setvisible.sync="setShow" :archiveunid="archiveUnid"></editset>
+	</div>
+</template>
+
+<script>
+	import {inherits} from 'ol/util.js';
+	import Map from 'ol/Map';
+	import View from 'ol/View';
+	import Feature from 'ol/Feature'; //元素
+	import Overlay from 'ol/Overlay'; //弹出框
+	import {toStringHDMS} from 'ol/coordinate';
+	import {fromLonLat, toLonLat} from 'ol/proj';
+	import {Tile as TileLayer, Vector as VectorLayer, VectorTile,Heatmap as HeatmapLayer} from 'ol/layer'; //瓦片图层 , 矢量图层等基础图层
+	import {Cluster, OSM, Vector as VectorSource, XYZ, TileJSON} from 'ol/source';
+	import KML from 'ol/format/KML.js';
+	import {
+	    defaults,
+	    Select,
+	    DragBox,
+	    Pointer,
+	    DragAndDrop,
+	    Draw,
+	    defaults as defaultInteractions,
+	    Pointer as PointerInteraction
+	    } from 'ol/interaction'; //交互，选择，画框等
+	  import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style'; //添加图层，点，圆等的样式调节
+	  import {Point, Geometry, LineString} from 'ol/geom'
+	  import GeoJSON from 'ol/format/GeoJSON.js';
+	  import 'ol/ol.css' //地图默认样式
+	  import editset from '../taskManage/editSet'
+	  import ocxplay from '../../components/ocxplay.vue'
+	  import moment from 'moment'
+	  var map = '';
+	  var Views = '';
+	export default{
+		data(){
+			return{
+				typeList:[],
+				tableData:[],
+				eventTypeList:[],
+				setShow:false,
+				archiveUnid:0,
+				startDt:moment(moment().format('YYYY-MM-DD')+' 00:00:00').utc().format('YYYY-MM-DD HH:mm:ss'),
+				endDt:moment(moment().format('YYYY-MM-DD')+' 23:59:59').utc().format('YYYY-MM-DD HH:mm:ss'),
+				snap_num:0,
+				audit_num:0
+			}
+		},
+		components:{
+			editset,ocxplay
+		},
+		mounted(){
+			this.getNum();
+			setTimeout(()=>{
+				this.drawLine();
+				this.getEventTypeList();
+				this.InitMap();
+			},300)
+		},
+		methods:{
+			getNum(){
+				this.$api.map.homeNum({
+					startDt:this.startDt,
+					endDt:this.endDt,
+					_t: Date.parse(new Date())/1000
+				}).then((res)=>{
+					this.typeList=res.list_data
+				}).catch((error)=>{
+				})
+				this.$api.map.homeCatch({
+					startDt:this.startDt,
+					endDt:this.endDt,
+					_t: Date.parse(new Date())/1000
+				}).then((res)=>{
+					this.snap_num=res.snap_num;
+					this.audit_num=res.audit_num;
+				}).catch((error)=>{
+				})
+			},
+			getEventTypeList(){
+				this.$api.map.eventTypeData({
+					_t: Date.parse(new Date())/1000
+				}).then((res)=>{
+					this.eventTypeList=res.list_data;
+					this.getData()
+				})
+			},
+			getData(){
+				this.$api.map.archive({
+					startDt:this.startDt,
+					endDt:this.endDt,
+					_t: Date.parse(new Date())/1000
+				}).then((res)=>{
+					this.tableData=res.content;
+				})
+			},
+			editVideo(index,row){
+				this.setShow=true;
+				this.archiveUnid=row.archive_unid;
+			},
+			delFun(index,row){
+				this.$api.map.delEvent({},row.archive_unid).then((res)=>{
+					console.log(res)
+				})
+				console.log(row)
+			},
+			eventFormatter(row, column, cellValue, index){
+				let value=''
+				this.eventTypeList.forEach(item=>{
+					if(item.code==cellValue){
+						value=item.name;
+					}
+				})
+				return value;
+			},
+			 drawLine(){
+				 this.$api.map.homeLine({
+				 	startDt:this.startDt,
+				 	endDt:this.endDt,
+				 	_t: Date.parse(new Date())/1000
+				 }).then((res)=>{
+					 let xData=[];
+					 let seriesData=[];
+					 let legendData=[];
+					 res.list_data.forEach(item=>{
+						 if(!xData.includes(item.hour)){
+							 xData.push(item.hour);
+						 }
+						 if(!legendData.includes(item.event_name)){
+							 legendData.push(item.event_name);
+							 seriesData.push({
+								 name: item.event_name,
+								 type: 'line',
+								 data: [item.total_num]
+							 })
+						 }else{
+							 seriesData.forEach(serItem=>{
+								 if(serItem.name==item.event_name){
+									 serItem.data.push(item.total_num)
+								 }
+							 })
+						 }
+					 })
+					 console.log(seriesData)
+					 // 基于准备好的dom，初始化echarts实例
+					 let myChart = this.$echarts.init(document.getElementById('myChart'))
+					 // 绘制图表
+					 myChart.setOption({
+					 	tooltip: {},
+					 	color:['#0069FF'],
+					 	xAxis: {
+					 		data: xData,
+					 		axisTick:false,
+					 		axisLine:{
+					 			lineStyle:{
+					 				color:'#d9d9d9'
+					 			}
+					 		},
+					 		axisLabel:{
+					 			color:'#666666',
+					 			fontSize:'10px'
+					 		}
+					 	},
+					 	grid:{
+					 		left:38,
+					 		bottom:30,
+					 		top:13,
+					 		right:21
+					 	},
+					 	yAxis: {
+					 		axisTick:false,
+					 		axisLine:{
+					 			lineStyle:{
+					 				color:'#d9d9d9'
+					 			}
+					 		},
+					 		axisLabel:{
+					 			color:'#666666',
+					 			fontSize:'10px'
+					 		}
+					 	},
+					 	series: seriesData
+					 });
+				 }).catch((error)=>{
+					console.log('e2',error)
+				})
+				
+			},
+			  InitMap(){
+			      let _this = this;
+			      //坐标
+			      //
+			      var heatData = {
+			         "type": "FeatureCollection",
+			  				"features": [{
+			  					"type": "Feature",
+			  					"geometry": {
+			  						"type": "Point",
+			  						"coordinates": [116.357068,39.954021, 0]
+			  					},
+			  					"properties": {
+			  						"name": "M 5 - 2012 Dec 25, PAKISTAN"
+			  					}
+			        }]
+			       }
+			  
+			      for(var i =0; i< 300; i++){
+			        let c = Math.random(1)*1000
+			        let e = Math.random(1)*100
+			        let b =  (116.357068 * 1000000 + i*c)/1000000;
+			        let d = (39.954021 * 1000000 + i*e)/1000000
+			        let a = {
+			              "type": "Feature",
+			              "geometry": {
+			                "type": "Point",
+			                "coordinates": [b,d, 0]
+			              },
+			              "properties": {
+			                "name": "M 5 - 2012 Dec 25, PAKISTAN" +i
+			              }
+			          }
+			        heatData.features.push(a)
+			      }
+			  
+			        var vectorSources = new VectorSource({
+			          features: (new GeoJSON()).readFeatures(heatData,{
+			                                                      dataProjection : 'EPSG:4326'
+			                                                    })
+			        });
+			        var path = "http://192.168.9.62:20080/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png"
+			        var offlineMapLayer = new TileLayer({
+			            source: new XYZ({
+			              // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
+			              url: path
+			            })
+			          });
+			  
+			        Views = new View({
+			  				projection: 'EPSG:4326',
+			  				zoom: 2,// 并且定义地图显示层级为2
+			  				minZoom:13,
+			  				maxZoom:18,
+			  				center:[120.324447,36.064594]
+			        })
+			        map = new Map({
+			  			// 设置地图图层
+			  			layers: [
+			  				// 创建一个使用Open Street Map地图源的瓦片图层
+			          offlineMapLayer,
+			        ],
+			          Interactions: [
+			              defaults,
+			              Select,
+			              DragBox
+			          ],
+			        loadTilesWhileAnimating:true,
+			  
+			  			// 设置显示地图的视图
+			  			view:Views ,
+			  			// 让id为map的div作为地图的容器
+			        target: 'map',
+			      });
+			       var heatmapvector = new HeatmapLayer({
+			          source: vectorSources,
+			          blur: parseInt(20, 6),
+			          radius:parseInt(3, 5),
+			        });
+			  
+			      map.addLayer(heatmapvector);
+			  
+			  		// 添加一个使用离线瓦片地图的层
+			       var CameraVertorlayer = new VectorLayer({
+			          source: _this.addCameraLayer([120.324447,36.064594],"相机A")
+			      });
+			  
+			      map.addLayer(CameraVertorlayer);
+			  
+			      this.addLayer();
+			  
+			      map.on('click',(e)=>{
+			        var pixel = map.getEventPixel(e.originalEvent);
+			        console.log(pixel);
+			        //点击相机标注点
+			        map.forEachFeatureAtPixel(pixel,function(feature){
+			          var coodinate = e.coordinate;
+			          _this.unid = feature.getProperties().unid;
+			          Overlay.setPosition(coodinate);
+			          map.addOverlay(Overlay);
+			        });
+			      });
+			      },
+			  
+			      addLayer(data){
+			        var pos = data;
+			        var marker = new Overlay({
+			            position: pos,
+			            positioning:  'center-center',
+			            element: document.getElementById('canvasDiv')
+			        });
+			        map.addOverlay(marker);
+			      },
+			      addCameraLayer(coordinate,phonetext) {
+			          let vectorSource = new VectorSource({id:1});
+			          let icon = new Feature({
+			              geometry: new Point(coordinate),
+			              unid:'1'
+			          });
+			          let color = '#156BB1'; //设置气泡颜色
+			          //添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
+			          let svg  = '<svg t="1540524238971"  class="icon" style="text-align:center" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4126" xmlns:xlink="http://www.w3.org/1999/xlink"  xml:space="preserve"><defs><style type="text/css"></style></defs>'+
+			          '<path fill="' + color + '" d="M865.309 291.918c-19.289-45.606-46.897-86.557-82.06-121.719-35.161-35.162-76.114-62.771-121.718-82.06-47.23-19.976-97.385-30.105-149.072-30.105S410.618 68.163 363.388 88.139c-45.605 19.289-86.557 46.898-121.719 82.06-35.162 35.161-62.771 76.114-82.06 121.719-19.976 47.229-30.105 97.384-30.105 149.071 0 51.687 10.129 101.841 30.105 149.07 19.289 45.605 46.898 86.558 82.06 121.72 35.162 35.161 76.114 62.771 121.719 82.06 11.201 4.738 22.569 8.914 34.081 12.541l-58.051 143.991-17.783 0c-14.129 0-25.583 11.454-25.583 25.583s11.454 25.583 25.583 25.583l352.169 0c0.063 0 0.124 0.007 0.187 0.007 0.101 0 0.203-0.006 0.303-0.007l35.985 0c14.13 0 25.583-11.454 25.583-25.583s-11.453-25.583-25.583-25.583l-18.876 0-57.565-146.13c24.322-8.109 47.832-18.654 70.119-31.546 57.156-33.063 105.093-80.61 138.628-137.502 34.561-58.633 52.83-125.787 52.83-194.204C895.414 389.302 885.285 339.148 865.309 291.918zM513.814 146.1c26.472 0 48.01 21.537 48.01 48.01 0 26.472-21.537 48.01-48.01 48.01s-48.011-21.537-48.011-48.01C465.804 167.638 487.342 146.1 513.814 146.1zM512.54 688.835c-111.982 0-203.086-91.104-203.086-203.086 0-111.982 91.104-203.086 203.086-203.086 111.981 0 203.086 91.104 203.086 203.086C715.626 597.731 624.521 688.835 512.54 688.835z" p-id="4127"></path><path d="M512.54 333.829c-83.769 0-151.921 68.152-151.921 151.921 0 83.769 68.15 151.921 151.921 151.921 83.769 0 151.921-68.15 151.921-151.921C664.461 401.98 596.309 333.829 512.54 333.829z" p-id="4128"></path><path d="M513.814 197.265c1.739 0 3.154-1.415 3.154-3.155 0-1.74-1.415-3.155-3.154-3.155-1.74 0-3.155 1.415-3.155 3.155C510.659 195.85 512.074 197.265 513.814 197.265z" p-id="4129"></path><path d="M636.408 950.372 636.408 950.372 636.408 950.373Z" p-id="4130"></path></svg>'
+			          let cameraIcon = new Image();
+			          cameraIcon.src = 'data:image/svg+xml,' + escape(svg);
+			          icon.setStyle(new Style({ //设置样式和大小
+			              image: new Icon({
+			                  img: cameraIcon,
+			                  crossOrigin: 'anonymous',
+			                  // src:'http://192.168.9.233:20080/static/pics/cache/biaozhu.svg',
+			                  imgSize: [28, 28],
+			                  zIndex:20,
+			                  marginTop:100
+			              }),
+			              text:new Text({
+			                text:phonetext,
+			                textBaseline: 'top',
+			                font: 'normal 12px 微软雅黑',
+			                lineHeight:'0px',
+			                fill: new Fill({
+			                      color: 'red',
+			                  }),
+			              }),
+			              stroke: new Stroke({
+			                  color: 'red',
+			                  width: 21,
+			                  marginTop:100,
+			              })
+			          }));
+			          vectorSource.addFeature(icon);
+			          return vectorSource;
+			      },
+			  
+			      addFeature(){
+			        function createStyle(src, img) {
+			          return new Style({
+			            image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
+			              anchor: [0.5, 0.96],
+			              crossOrigin: 'anonymous',
+			              src: src,
+			              img: img,
+			              imgSize: img ? [img.width, img.height] : undefined
+			            }))
+			          });
+			        }
+			  
+			        var iconFeature = new Feature(new Point([113.338591,34.506910]));
+			        iconFeature.set('style', createStyle('../../../assets/img/dianli.png', undefined));
+			        var CameraVertorlayer = new VectorLayer({
+			                source: iconFeature,
+			                id:1
+			            });
+			            map.addLayer(this.CameraVertorlayer);
+			      },
+		}
+	}
+</script>
+
+<style scoped="scoped">
+	.infoBox{
+		margin-bottom: 8px;
+	}
+	.infoChild{
+		width: 204px;
+		height: 70px;
+		display: inline-block;
+		background: #FFFFFF;
+		margin-right: 8px;
+	}
+	.infoChild:nth-child(1) img{
+		width: 27px;
+		height: 27px;
+		margin: 22px 20px 21px 40px;
+	}
+	.infoChild:nth-child(2) img{
+		width: 30px;
+		height: 27px;
+		margin: 22px 22px 21px 37px;
+	}
+	.infoChild:nth-child(3) img{
+		width: 28px;
+		height: 28px;
+		margin: 22px 22px 20px 34px;
+	}
+	.infoChild:nth-child(4) img{
+		width: 27px;
+		height: 28px;
+		margin: 22px 22px 20px 34px;
+	}
+	.textCon{
+		display: inline-block;
+		vertical-align: top;
+		font-size: 12px;
+		color: #666666;
+		margin-top: 14px;
+	}
+	.textCon span{
+		font-size: 20px;
+		margin-right: 2px;
+	}
+	.colorText{
+		margin-top: 6px;
+		color: #444444;
+	}
+	.ol-control button{
+	  display:none!important;
+	  background:red!important
+	}
+	.ol-popup {
+	    position: absolute;
+	    background-color: #eeeeee;
+	    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+	    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+	    padding: 15px;
+	    border-radius: 10px;
+	    border: 1px solid #cccccc;
+	    bottom: 12px;
+	    left: -50px;
+	    min-width: 280px;
+	}
+	
+	.ol-popup:after,
+	.ol-popup:before {
+	    top: 100%;
+	    border: solid transparent;
+	    content: " ";
+	    height: 0;
+	    width: 0;
+	    position: absolute;
+	    pointer-events: none;
+	}
+	
+	.ol-popup:after {
+	    border-top-color: #eeeeee;
+	    border-width: 10px;
+	    left: 48px;
+	    margin-left: -10px;
+	}
+	
+	.ol-popup:before {
+	    border-top-color: #cccccc;
+	    border-width: 11px;
+	    left: 48px;
+	    margin-left: -11px;
+	}
+	
+	.ol-popup-closer {
+	    text-decoration: none;
+	    position: absolute;
+	    top: 2px;
+	    right: 8px;
+	}
+	
+	.ol-popup-closer:after {
+	    content: "✖";
+	}
+	.popup-content{
+	  height:300px;
+	  overflow:auto
+	}
+	.pop-info-box{
+	  overflow: hidden;
+	  border-bottom :2px solid #fff
+	}
+	.pop-img-box {
+	  float: left;
+	  height: 100px;
+	  width :120px;
+	  img{
+	    height: 100%;
+	    width: 100%;
+	  }
+	}
+	.pop-info{
+	  float: left;
+	  padding-left: 20px;
+	  width :100px
+	}
+	.map-box {
+	  position: relative;
+	  background :#f8f8f8;
+	  border-radius: 10px;
+	  .content-info{
+	    position :absolute;
+	    z-index :1000;
+	    color: red
+	  }
+	}
+	.numBox{
+		width: 307px;
+		height: 125px;
+		background: #FFFFFF;
+		color: #444444;
+		position: relative;
+	}
+	.numBox:nth-child(1){
+		margin-bottom: 6px;
+	}
+	.num{
+		font-size: 30px;
+		margin: 27px 0 0 13px;
+		display: inline-block;
+		font-weight:bold;
+	}
+	.catch{
+		width: 57px;
+		position: absolute;
+		top:59px;
+		right: 16px;
+	}
+	.backSea{
+		width: 100%;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+	.title{
+		padding: 12px 0 0 11px;
+		color: #444444;
+		font-size: 16px;
+	}
+	.inMapBox{
+		background: #f8f8f8;
+		display: inline-block;
+		position: absolute;
+		z-index: 99;
+		border: 1px solid #E5E5E5;
+		border-bottom: none;
+		top: 5px;
+		left: 5px;
+		box-shadow:0px 2px 4px 0px rgba(0,0,0,0.18);
+	}
+	.lDiv{
+		width: 110px;
+		height: 36px;
+		line-height:36px;
+		border-bottom: 1px solid #E5E5E5;
+	}
+	.lDiv span{
+		display: inline-block;
+	text-align: center;
+	font-size: 12px;
+		float: left;
+	}
+	.ltext{
+		width: 71px;
+		height: 100%;
+		border-right:1px solid #E5E5E5;
+	}
+	.lnum{
+		width: 37px;
+	}
+	.maps{
+	  height: 491px;
+	  width:840px;
+	  margin-bottom: 8px;
+	  position: relative;
+	}
+	.canvasDiv{
+	  height :30px;
+	  width :30px;
+	  background :red;
+	  border-radius :30px;
+	  color: #ffffff;
+	  font-size :12px;
+	  text-align :center;
+	  line-height :30px;
+	  z-index :10;
+	  opacity :0.5;
+	}
+	.pl3{
+	  padding-left: 3px
+	}
+	.rotate-north {
+	    top: 65px;
+	    left: .5em;
+	}
+	.ol-touch .rotate-north {
+	  top: 80px;
+	}
+	
+	.canvasDiv{
+	    height:30px;
+	    width:30px;
+	    border-radius: 25px;
+	    background: rgba(255, 0, 0, 1);
+	    transform: scale(0);
+	    animation: myfirst 3s;
+	    animation-iteration-count: infinite;
+	}
+	@keyframes myfirst{
+	    to{
+	        transform: scale(2);
+	        background: rgba(0, 0, 0, 0);
+	    }
+	}
+	.el-table th, .el-table tr{
+		background:rgba(248,249,250,1)!important;
+	}
+	.ol-overlaycontainer-stopevent{
+	  display:none!important;
+	}
+	.alarm-active{
+	  display :none
+	}
+	.alarm-makerbox{
+	  display:block;
+	  height :200px;
+	  width: 200px;
+	  border-radius :5px;
+	  background: rgba(39, 41, 48, .9);
+	  color: #ffffff;
+	  font-family :'微软雅黑';
+	  font-size :14px;
+	  animation: op 1s;
+	  -moz-animation: op 1s;	/* Firefox */
+	  -webkit-animation: op 1s;	/* Safari 和 Chrome */
+	  -o-animation: op 1s;
+	}
+	@keyframes op {
+	  from {opacity: 0;}
+	  to {opacity: 1;}
+	}
+	@-moz-keyframes op /* Firefox */
+	{
+	  from {opacity: 0;}
+	  to {opacity: 1;}
+	}
+	
+	@-webkit-keyframes op /* Safari 和 Chrome */
+	{
+	  from {opacity: 0;}
+	  to {opacity: 1;}
+	}
+	
+	@-o-keyframes op /* Opera */
+	{
+	  from {opacity: 0;}
+	  to {opacity: 1;}
+	}
+	.exit-alarm::after{
+	  float :right;
+	  height: 20px;
+	  width :20px;
+	  margin :5px;
+	  content: "✖";
+	  cursor: pointer;
+	}
+	.img-box{
+	  width: 200px;
+	  height :100px;
+	  overflow :hidden;
+	  img{
+	    height :100%;
+	    width :100%;
+	    text-align: center
+	  }
+	}
+	.info-list {
+	  padding :1px 10px
+	}
+	.edit{
+		cursor: pointer;
+		width: 18px;
+	}
+	.play{
+		cursor: pointer;
+		width:17px;
+	}
+	.pause,.del{
+		cursor: pointer;
+		width: 12px;
+	}
+	.tableSpanBorder{
+		display: inline-block;
+		height: 18px;
+		border-left:2px solid #E5E5E5;
+		margin: 0 17px;
+	}
+	.lines{
+		display: inline-block;
+		width: 10px;
+		border-top:1px solid #cccccc ;
+		margin: 3px;
+	}
+	.el-table__body tr{
+		background: #FFFFFF!important;
+	}
+</style>
--- a/src/views/sceneManage/index.vue
+++ b/src/views/sceneManage/index.vue
+<template>
+  <div>
+	  <div class="contentBox">
+		<div class="leftCon">
+			<div class="titles">视频设备</div>
+			<div class="searchBox">
+				<el-input
+				  placeholder="输入关键字进行过滤"
+				  v-model="filterText">
+				</el-input>
+			</div>
+			<div class="treeBox">
+				<el-tree
+				  :data="data"
+				  :props="defaultProps"
+				  default-expand-all
+				  :filter-node-method="filterNode"
+				  ref="tree">
+				</el-tree>
+			</div>
+		</div>
+		<div class="middleCon">
+			<div class="objectCon">
+				<ocxplay ref="ocx"></ocxplay>
+			</div>
+			<div>
+				<div style="float: left;" class="">
+					<el-table
+					height="284"
+					  :data="sceneData"
+					  stripe
+					  border
+					  style="width: 775px;margin-right: 12px;">
+					  <el-table-column
+						type="index"
+						align="center"
+						width="100">
+					  </el-table-column>
+					  <el-table-column
+					  align="center"
+						prop="num"
+						label="预设位编号">
+					  </el-table-column>
+					  <el-table-column
+						  align="center"
+						prop="set"
+						label="预设位配置">
+						<template slot-scope="scope">
+							<el-tooltip content="修改" placement="bottom" effect="light" :visible-arrow=false>
+								<span class="iconfont icon-xiugai editIcon"   @click="editFun(scope.$index, scope.row)"></span>
+							</el-tooltip>
+							<span class="tableSpanBorder"></span>
+							<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
+								<span class="iconfont icon-detail delIcon"   @click="delFun(scope.$index, scope.row)"></span>
+							</el-tooltip>
+						</template>
+					  </el-table-column>
+					  <el-table-column
+						  align="center"
+						prop="type"
+						width="400"
+						label="参数设置">
+						<template slot-scope="scope">
+								<span class="tableBtn" @click="paramsSet(scope.$index, scope.row)">参数设置</span>
+							<span class="tableSpanBorder"></span>
+								<span class="tableBtn" @click="areaSet(scope.$index, scope.row)">区域设置</span>
+							<span class="tableSpanBorder"></span>
+								<span class="tableBtn" @click="markSet(scope.$index, scope.row)">标定设置</span>
+							<span class="tableSpanBorder"></span>
+								<span class="tableBtn" @click="timeSet(scope.$index, scope.row)">时间设置</span>
+						</template>
+					  </el-table-column>
+					</el-table>
+				</div>
+				<div class="handleBox">
+					<div class="handleTitle">基础操作</div>
+					<div class="operaBox">
+						<p>场景添加 <span class="iconfont icon-add-circle-s lefts"></span></p>
+						<p>轮循播放 <el-switch class="lefts" :width="22" v-model="loopStart" active-color="#0069FF" inactive-color="#cccccc"></el-switch></p>
+						<p>配置导入 <span class="iconfont icon-login lefts"></span></p>
+						<p>配置导出 <span class="iconfont icon-daochu lefts"></span></p>
+						<p>效果展示 <span class="iconfont icon-zhanshi lefts"></span></p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="rightCon">
+			<el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
+			    <el-tab-pane label="全部数据" name="first">
+					<div class="tabCon">
+						<div class="cardCon">
+							<img src="../../assets/img/map/back.png" alt="">
+							<div class="imginfo">
+								<span>车牌号码：无牌</span>
+								<span>车辆类型：小型轿车</span>
+								<span>车身颜色：黑</span>
+								<span>车辆品牌：丰田</span>
+								<span>违法类型：正常</span>
+							</div>
+							<div style="clear: both;"></div>
+						</div>
+					</div>
+				</el-tab-pane>
+			    <el-tab-pane label="违法" name="second">违法</el-tab-pane>
+			    <el-tab-pane label="事件" name="third">事件</el-tab-pane>
+			  </el-tabs>
+		</div>
+		<div style="clear: both;"></div>
+	</div>
+	<paramset :visible.sync="paramshow"></paramset>
+  </div>
+</template>
+<script>
+	import ocxplay from '../../components/ocxplay.vue'
+	import paramset from './paramSet.vue'
+	export default {
+		data(){
+			return{
+				paramshow:false,
+				activeName:'first',
+				loopStart:true,
+				sceneData:[
+					{
+						num:1
+					},
+					{
+						num:1
+					},{
+						num:1
+					}
+				],
+				filterText: '',
+				data: [{
+				  id: 1,
+				  label: '一级 1',
+				  children: [{
+					id: 4,
+					label: '二级 1-1',
+					children: [{
+					  id: 9,
+					  label: '三级 1-1-1'
+					}, {
+					  id: 10,
+					  label: '三级 1-1-2'
+					}]
+				  }]
+				}, {
+				  id: 2,
+				  label: '一级 2',
+				  children: [{
+					id: 5,
+					label: '二级 2-1'
+				  }, {
+					id: 6,
+					label: '二级 2-2'
+				  }]
+				}, {
+				  id: 3,
+				  label: '一级 3',
+				  children: [{
+					id: 7,
+					label: '二级 3-1'
+				  }, {
+					id: 8,
+					label: '二级 3-2'
+				  }]
+				}],
+				defaultProps: {
+				  children: 'children',
+				  label: 'label'
+				}
+			}
+		},
+		 watch: {
+		      filterText(val) {
+		        this.$refs.tree.filter(val);
+		      }
+		    },
+		components:{
+			ocxplay,paramset
+		},
+		methods:{
+			handleClick(tab, event) {
+				console.log(tab, event);
+			},
+			filterNode(value, data) {
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			editFun(index,row){
+				  
+			},
+			delFun(index,row){
+				console.log(row)
+			},
+			paramsSet(index,row){
+				this.paramshow=true;
+				console.log(row)
+			},
+			areaSet(index,row){
+				console.log(row)
+			},
+			markSet(index,row){
+				console.log(row)
+			},
+			timeSet(index,row){
+				console.log(row)
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+	.tabCon{
+		padding: 8px;
+		height: 770px;
+	}
+	.cardCon{
+		background: #F1F1F1;
+		padding: 7px;
+	}
+	.cardCon img{
+		width: 237px;
+		height: 133px;
+		float: left;
+	}
+	.imginfo{
+		float: left;
+		margin-left: 10px;
+	}
+	.imginfo span{
+		display: block;
+		margin-bottom: 6px;
+	}
+	.imginfo span:first-of-type{
+		margin-top: 7px;
+	}
+	.leftCon{
+		width: 210px;
+		background: #FFFFFF;
+		float: left;
+	}
+	.middleCon{
+		display: inline-block;
+		margin-left: 12px;
+		float: left;
+	}
+	.objectCon{
+		width: 980px;
+		height: 543px;
+		margin-bottom: 12px;
+		background: #FFFFFF;
+	}
+	.handleBox{
+		float: left;
+		width: 193px;
+		border:1px solid #F0F3F9;
+	}
+	.handleTitle{
+		height:40px;
+		background:#ACC1FF;
+		color: $white-font-color;
+		font-size:14px;
+		text-align: center;
+		line-height: 40px;
+	}
+	.operaBox{
+		padding: 1px 19px;
+		background: #FFFFFF;
+	}
+	.operaBox .lefts{
+		color: #CCCCCC;
+		font-size: 16px;
+		margin-left: 70px;
+	}
+	.operaBox .iconfont{
+		margin-left: 72px;
+		cursor: pointer;
+	}
+	.operaBox .iconfont:hover{
+		color: #3BB7FF;
+	}
+	.operaBox p{
+		margin:0;
+		margin-bottom: 24px;
+	}
+	.operaBox p:first-of-type{
+		margin-top: 24px;
+	}
+	.titles{
+		height:30px;
+		background:rgba(59,183,255,1);
+		color: $white-font-color;
+		font-size:14px;
+		padding-left: 13px;
+		line-height: 30px;
+	}
+	.searchBox{
+		padding: 10px;
+	}
+	.treeBox{
+		padding: 10px;
+	}
+	.editIcon{
+		cursor: pointer;
+		color:#0069ff;
+		font-size:16px;
+	}
+	.delIcon{
+		cursor: pointer;
+		color:#f2365a;
+		font-size:16px;
+	}
+	.rightCon{
+		float: left;
+		background: #FFFFFF;
+		margin-left: 12px;
+		width: 409px;
+	}
+</style>
\ No newline at end of file
--- a/src/views/sceneManage/paramSet.vue
+++ b/src/views/sceneManage/paramSet.vue
+<template>
+	<div>
+		<el-dialog
+		ref="dialog"
+		  title="提示"
+		  :visible.sync="visible"
+		  width="50%"
+		  :before-close="handleClose">
+		  <div>
+			  <div class="leftCon">
+				  <div class="searchBox">
+				  	<el-input
+				  	  placeholder="输入关键字进行过滤"
+				  	  v-model="filterText">
+				  	</el-input>
+				  </div>
+				  <el-tree
+				    :data="data"
+				    :props="defaultProps"
+				    default-expand-all
+				    :filter-node-method="filterNode"
+				    ref="tree">
+				  </el-tree>
+			  </div>
+			  <div class="rightCon">
+				  <el-table
+				  height="522"
+				    :data="tableData"
+				    stripe
+				    border>
+				    <el-table-column
+				    align="center"
+				  	prop="num"
+				  	label="参数名">
+				    </el-table-column>
+				    <el-table-column
+				  	  align="center"
+				  	prop="set"
+				  	label="预设位配置">
+				  	<template slot-scope="scope">
+						<span>{{scope.row.num}}</span>
+				  	</template>
+				    </el-table-column>
+				    <el-table-column
+				  	  align="center"
+				  	prop="type"
+				  	label="说明">
+				  	<template slot-scope="scope">
+						<span>{{scope.row.num}}</span>
+				  	</template>
+				    </el-table-column>
+				  </el-table>
+			  </div>
+			  <div style="clear: both;"></div>
+		  </div>
+		  <span slot="footer" class="dialog-footer">
+		    <el-button @click="visiblehide">取 消</el-button>
+		    <el-button type="primary" @click="visiblehide">确 定</el-button>
+		  </span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				tableData:[
+					{
+						num:1
+					},
+					{
+						num:1
+					},{
+						num:1
+					}
+				],
+				filterText: '',
+				data: [{
+				  id: 1,
+				  label: '一级 1',
+				  children: [{
+					id: 4,
+					label: '二级 1-1',
+					children: [{
+					  id: 9,
+					  label: '三级 1-1-1'
+					}, {
+					  id: 10,
+					  label: '三级 1-1-2'
+					}]
+				  }]
+				}, {
+				  id: 2,
+				  label: '一级 2',
+				  children: [{
+					id: 5,
+					label: '二级 2-1'
+				  }, {
+					id: 6,
+					label: '二级 2-2'
+				  }]
+				}, {
+				  id: 3,
+				  label: '一级 3',
+				  children: [{
+					id: 7,
+					label: '二级 3-1'
+				  }, {
+					id: 8,
+					label: '二级 3-2'
+				  }]
+				}],
+				defaultProps: {
+				  children: 'children',
+				  label: 'label'
+				}
+			}
+		},
+		props:{
+			visible:{
+				type:Boolean,
+				default:false
+			},
+		},
+		methods:{
+			filterNode(value, data) {
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			handleClose(done){
+				this.$emit('update:visible',false);
+			},
+			visiblehide(){
+				this.$emit('update:visible',false)
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped" lang="scss">
+	.rightCon{
+		width: 608px;
+		margin-left: 12px;
+		float: left;
+	}
+	.leftCon{
+		float: left;
+		width: 250px;
+		border: 1px solid #CCCCCC;
+		border-radius: 4px;
+		padding: 10px;
+		min-height: 500px;
+	}
+	.titles{
+		height:30px;
+		background:rgba(59,183,255,1);
+		color: $white-font-color;
+		font-size:14px;
+		padding-left: 13px;
+		line-height: 30px;
+	}
+	.searchBox{
+		padding: 10px;
+	}
+</style>
--- a/src/views/search/vehicleSearch.vue
+++ b/src/views/search/vehicleSearch.vue
+<template>
+  <div class="innnerBox">
+		   <el-col :span="22">
+			  <el-form ref="form" label-width="80px" inline>
+					  <el-form-item label="资源类型">
+						<span class="selectBox">
+						   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.source_type">
+							 <el-option value="pull_video_stream" label='拉取视频'></el-option>
+							 <el-option value="pull_pic_files" label='拉取图片'></el-option>
+							</el-select>
+						</span>
+					  </el-form-item>
+					  <el-form-item label="相机名称" >
+						   <span class="inputBox">
+							 <el-input placeholder="请输入相机名称" v-model="conditions.vchan_name"></el-input>
+						   </span>
+					  </el-form-item>
+					  <el-form-item label="任务名称">
+						   <span class="inputBox">
+							 <el-input placeholder="请输入任务名称"  v-model="conditions.task_name"></el-input>
+						   </span>
+					  </el-form-item>
+						<el-form-item label="车牌号码">
+						   <span class="inputBox">
+							 <el-input placeholder="请输入车牌号码"  v-model="conditions.plate"></el-input>
+						   </span>
+						</el-form-item>
+						<el-form-item label="车辆类型">
+							<span class="selectBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false  v-model="conditions.car_type" >
+								  <el-option value="" label='全部'></el-option>
+								  <el-option v-for='item in vehicleTypeList' :value="item.code" :key="item.code" :label='item.name'></el-option>
+								</el-select>
+							</span>
+						</el-form-item>
+						<el-form-item label="车身颜色">
+							<span class="selectBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.car_color">
+								  <el-option value="" label='全部'></el-option>
+								  <el-option v-for='item in vehicleColorList' :value="item.code" :key="item.code" :label='item.name'></el-option>
+								</el-select>
+							</span>
+						</el-form-item>
+						<el-form-item label="车辆品牌">
+							<span class="selectBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false  v-model="conditions.logo_type">
+								 <el-option value="" label='全部'></el-option>
+								 <el-option v-for='item in brandList' :value="item.code" :key="item.code" :label='item.name'></el-option>
+								</el-select>
+							</span>
+						</el-form-item>
+						<el-form-item label="标志物">
+							<span class="selectBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false  v-model="conditions.marker">
+								 <el-option value="" label='全部'></el-option>
+								 <el-option value="0" label='年检标志'></el-option>
+								 <el-option value="1" label='摆件'></el-option>
+								 <el-option value="2" label='吊坠'></el-option>
+								 <el-option value="3" label='遮阳板'></el-option>
+								</el-select>
+							</span>
+						</el-form-item>
+						<el-form-item label="特殊车辆">
+							<span class="selectBox">
+							   <el-select placeholder="请选择" :popper-append-to-body=false v-model="conditions.special_type">
+								 <el-option value="" label='全部'></el-option>
+								 <el-option value="0" label='普通车辆'></el-option>
+								 <el-option value="1" label='车辆运输车'></el-option>
+								 <el-option value="2" label='危险品运输车'></el-option>
+								 <el-option value="3" label='救护车'></el-option>
+								</el-select>
+							</span>
+						</el-form-item>
+						<el-form-item label="起始时间">
+							  <span class="dateBox">
+								  <el-date-picker
+								   v-model="dates"
+								   value-format="yyyy-MM-dd HH:mm:ss"
+								    :default-time="['00:00:00', '23:59:59']"
+								   type="datetimerange"
+								   range-separator="至"
+								   start-placeholder="开始日期"
+								   end-placeholder="结束日期">
+								 </el-date-picker>
+							  </span>
+						  </el-form-item>
+			  </el-form>
+		  </el-col>
+		   <el-col :span="2">
+			   <div style="margin-bottom: 6px;padding-top: 3px;">
+					<el-button type="primary" style="" @click="query" class="block">查询</el-button>
+					<el-button type="success" class="block">导出</el-button>
+				</div>
+				<div>
+					<el-button type="success" class="block">批量删除</el-button>
+				</div>
+		   </el-col>
+		  <div  style="">
+			  <el-table
+			       :data="formattterData"
+			       height="574"
+				   stripe
+				   border
+			      @selection-change="handleSelectionChange">
+			      <el-table-column
+			        type="selection"
+			        align="center"
+			        width="55">
+			      </el-table-column>
+			       <el-table-column
+			         prop="vehicle_plate_text"
+			          align="center"
+			         label="车牌号码">
+			       </el-table-column>
+			         <el-table-column
+			         prop="vehicle_body_type_text"
+			          align="center"
+			         label="车辆类型">
+			       </el-table-column>
+			       <el-table-column
+			         prop="vehicle_body_logo_text"
+			          align="center"
+			         label="车辆品牌">
+			       </el-table-column>
+			       <el-table-column
+			         prop="vehicle_body_color_text"
+			          align="center"
+			         label="车身颜色">
+			       </el-table-column>
+			       <el-table-column
+			         prop="RefinedFeature_text"
+					   align="center"
+			         label="标识物">
+			       </el-table-column>
+			       <el-table-column
+			         prop="special_text"
+					 align="center"
+			         label="特殊车辆">
+			       </el-table-column>
+			        <el-table-column
+			         prop="shoot_date"
+			          align="center"
+			         label="抓拍时间">
+					 <template slot-scope="scope">
+						 <span>{{scope.row.shoot_date}} {{scope.row.shoot_time}}</span>
+					 </template>
+			       </el-table-column>
+			        <el-table-column
+			         prop="location_name"
+			          align="center"
+			         label="抓拍地点">
+			       </el-table-column>
+			       <el-table-column
+			        align="center"
+			         label="操作">
+			         <template slot-scope="scope">
+			         	<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
+			         		<span class="iconfont icon-xiugai editIcon"   @click="detailFun(scope.$index, scope.row)"></span>
+			         	</el-tooltip>
+			         	<span class="tableSpanBorder"></span>
+			         	<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
+			         		<span class="iconfont icon-detail  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
+			         	</el-tooltip>
+			         </template>
+			       </el-table-column>
+			  </el-table>
+				<div style="margin-top: 28px;">
+					<el-pagination
+					style="float: right;"
+					  background
+					  prev-text="上一页"
+					  next-text="下一页"
+					   :page-sizes="[30, 50, 100, 200]"
+					  layout="prev, pager, next,sizes"
+					  :current-page="page"
+					  @size-change="handleSizeChange"
+					  @current-change="handleCurrentChange"
+					  :total="total">
+					</el-pagination>
+					<div style="clear: both;"></div>
+				</div>
+		  </div>
+		  <el-dialog
+		    title="详情"
+		    top="12vh"
+		    :visible.sync="detailVisible"
+		    width="1000px">
+			<div style="position: relative;padding: 10px 20px;">
+				<div class="leftArrow" @click="leftFun"><i class="el-icon-d-arrow-left"></i></div>
+				<div class="detaiCon">
+					<img :src="detailImg" alt="" style="width: 100%;">
+					<el-form  label-width="80px" inline>
+						<div>
+							<el-form-item label="车牌号码:">
+								<span>{{ detailObj.vehicle_plate_text }}</span>
+							</el-form-item>
+							<el-form-item label="车牌类型:">
+								<span>{{ detailObj.plate_type_text }}</span>
+							</el-form-item>
+						</div>
+						<div>
+							<el-form-item label="经过日期:">
+								<span>{{ detailObj.shoot_date ? detailObj.shoot_date : '' }}</span>
+							</el-form-item>
+							<el-form-item label="经过时间:">
+								<span>{{ detailObj.shoot_time ? detailObj.shoot_time : '' }}</span>
+							</el-form-item>
+						</div>
+						<div>
+							<el-form-item label="经过地点:">
+								<span>{{ detailObj.location_name }}</span>
+							</el-form-item>
+							<el-form-item label="车辆品牌:">
+								<span>{{ detailObj.vehicle_body_logo_text }}</span>
+							</el-form-item>
+						</div>
+						<div>
+							<el-form-item label="车辆类型:">
+								<span>{{ detailObj.vehicle_body_type_text }}</span>
+							</el-form-item>
+							<el-form-item label="车牌颜色:">
+								<span>{{ detailObj.plate_color_text }}</span>
+							</el-form-item>
+						</div>
+						<div>
+							<el-form-item label="车身颜色:">
+								<span>{{ detailObj.vehicle_body_color_text }}</span>
+							</el-form-item>
+							<el-form-item label="标志物:">
+								<span>{{ detailObj.RefinedFeature_text }}</span>
+							</el-form-item>
+						</div>
+					</el-form>
+				</div>
+				<div class="rightArrow"  @click="rightFun"><i class="el-icon-d-arrow-right"></i></div>
+			</div>
+		    <span slot="footer" class="dialog-footer">
+		      <el-button @click="detailDel">删 除</el-button>
+		      <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
+		    </span>
+		  </el-dialog>
+  </div>
+</template>
+<script>
+	export default {
+		data(){
+			let start_dt = this.$moment('2019-12-20').format('YYYY-MM-DD')+' 00:00:00';
+			let end_dt = this.$moment().format('YYYY-MM-DD')+' 23:59:59';
+			return{
+				detailObj:{},
+				carImg:require("@/assets/img/home/defaultImg.png"),
+				detailImg:'',
+				detailVisible:false,
+				dates:[ start_dt,end_dt ],
+				conditions: {
+					start_dt:start_dt,
+					end_dt:end_dt,
+					source_type: 'pull_video_stream',
+					marker: '',
+					car_type: '',
+					car_color: '',
+					logo_type: '',
+					plate:'',
+				  task_name:'',
+				  curdelid:'',
+					vchan_name:'',
+				  special_type:''
+				},
+				brandList:this.$buildCode.getCodeList('车辆品牌'),
+				vehicleTypeList:this.$buildCode.getCodeList('车辆类型'),
+				vehicleColorList:this.$buildCode.getCodeList('车身颜色'),
+				tableData:[],
+				formattterData:[],
+				total:0,
+				page:1,
+				pageSize:30,
+				selectcheck:[],
+				currentIndex:0
+			}
+		},
+		watch:{
+			dates(val){
+				this.conditions.start_dt=val[0];
+				this.conditions.end_dt=val[1];
+			}
+		},
+		components:{},
+		mounted(){
+			this.getData()
+		},
+		methods:{
+			leftFun(){
+				if(this.currentIndex-1<0){
+					  this.$message({
+						  message: '目前为第一条',
+						  type: 'warning'
+						});
+						return false;
+				}
+				this.detailObj=this.formattterData[this.currentIndex-1];
+				this.currentIndex-=1;
+				this.getImg(this.detailObj.pics[0].pic_unid);
+			},
+			rightFun(){
+				if(this.currentIndex==this.formattterData.length-1){
+					  this.$message({
+						  message: '目前为最后一条',
+						  type: 'warning'
+						});
+						return false;
+				}
+				this.detailObj=this.formattterData[this.currentIndex+1];
+				this.currentIndex+=1;
+				this.getImg(this.detailObj.pics[0].pic_unid);
+			},
+			handleSelectionChange(obj){
+			   this.selectcheck = [];
+				 obj.forEach(item => {
+				   this.selectcheck.push(item.id)
+				 });
+			},
+			handleSizeChange(val) {
+				this.pageSize=val;
+				this.getData();
+			},
+			handleCurrentChange(val) {
+				this.page=val;
+				this.getData();
+			  },
+			query(){
+				this.getData();
+			},
+			getData(){
+				this.formattterData=[];
+				let offset = (this.page - 1) * this.pageSize;
+				let search_params = {
+					limit: this.pageSize,
+					offset: offset,
+					event_dt__gte: this.$moment(this.conditions.start_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
+					event_dt__lt:this.$moment(this.conditions.end_dt).utc().format('YYYY-MM-DD HH:mm:ss'),
+					source_type: this.conditions.source_type,
+					vchan_name__like: this.conditions.vchan_name,
+					vehicle_type: this.conditions.car_type,
+					body_color: this.conditions.car_color,
+					logo_type: this.conditions.logo_type,
+					plate_number__like: this.conditions.plate,
+					marker: this.conditions.marker,
+					event_type: '',
+					special_type:this.conditions.special_type,
+					task_name: this.conditions.task_name ? this.conditions.task_name.replace(/\s\s*/g, '') : this.conditions.task_name
+				}
+				this.$api.search.vehicleList(search_params
+				).then((res)=>{
+					this.total=res.total_num;
+					res.list_data.forEach((item,index)=>{
+						this.formattterData.push(this.$buildCode.init(item));
+					})
+					
+				}).catch((err)=>{
+					
+				})
+			},
+			getImg(unid){
+				this.$api.search.detailImg({
+				},unid).then(res=>{
+					this.detailImg=res.pic_url ? res.pic_url : carImg;
+				}).catch(e=>{
+					
+				})
+			},
+			detailFun(index,row){
+				this.currentIndex=index;
+				if(row.pics.length>0){
+					this.detailObj = Object.assign({},row);
+					this.getImg(row.pics[0].pic_unid);
+				}
+				this.detailVisible=true;
+			},
+			delFun(index,row){
+				 this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+					  confirmButtonText: '确定',
+					  cancelButtonText: '取消',
+					  type: 'warning'
+					}).then(() => {
+						this.$api.search.delVehicle({
+						},row.id).then(res=>{
+						  if(res.ecode==200){
+							  this.formattterData.splice(index);
+							this.$message({
+							  type: 'success',
+							  message: '删除成功!'
+							});
+						  }else{
+							  this.$message.error('删除失败!');
+						  }
+						}).catch(e=>{
+							this.$message.error('删除失败!');
+						})
+					})
+				
+			},
+			detailDel(){
+				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+				  confirmButtonText: '确定',
+				  cancelButtonText: '取消',
+				  type: 'warning'
+				}).then(() => {
+					this.$api.search.delVehicle({},this.detailObj.id).then(res=>{
+							if(res.ecode==200){
+								this.formattterData.splice(this.currentIndex,1);
+								this.detailObj = Object.assign({},this.formattterData[this.currentIndex]);
+								this.getImg(this.formattterData[this.currentIndex].pics[0].pic_unid);
+								this.$message({
+								  type: 'success',
+								  message: '删除成功!'
+								});
+							}else{
+								this.$message.error('删除失败!');
+							}
+					}).catch(e=>{
+						this.$message.error('删除失败!');
+					})
+					
+				})
+			 
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
--- a/src/views/taskManage/editSet.vue
+++ b/src/views/taskManage/editSet.vue
+<template>
+	<div>
+		<el-dialog
+		  title="任务配置修改"
+		  :visible.sync="setvisible"
+		  width="450px"
+		  :before-close="handleClose">
+		  <div>
+			  <el-form label-position="left" label-width="80px" :model="formData">
+			    <el-form-item label="任务名称">
+			      <el-input v-model="formData.task_name" placeholder="请输入任务名称"></el-input>
+			    </el-form-item>
+			    <el-form-item label="算法类型">
+					<el-select v-model="formData.type" placeholder="请选择" :popper-append-to-body=false>
+					   <el-option
+					     key="1"
+					     label="全部"
+					     value="">
+					   </el-option>
+					  <el-option
+						key="2"
+						label="222"
+						value="2">
+					  </el-option>
+					 </el-select>
+			    </el-form-item>
+			    <el-form-item label="场景占用">
+			      <el-select v-model="formData.type" placeholder="请选择" :popper-append-to-body=false>
+			         <el-option
+			           key="1"
+			           label="全部"
+			           value="">
+			         </el-option>
+			        <el-option
+			      	key="2"
+			      	label="222"
+			      	value="2">
+			        </el-option>
+			       </el-select>
+			    </el-form-item>
+				<el-form-item label="时间计划">
+				  <el-input v-model="formData.type"></el-input>
+				</el-form-item>
+				<el-form-item label="时间">
+				  <el-input v-model="formData.type"></el-input>
+				</el-form-item>
+				<el-form-item label="存储配置">
+				  <el-select v-model="formData.type" placeholder="请选择" :popper-append-to-body=false>
+				     <el-option
+				       key="1"
+				       label="全部"
+				       value="">
+				     </el-option>
+				    <el-option
+				  	key="2"
+				  	label="222"
+				  	value="2">
+				    </el-option>
+				   </el-select>
+				</el-form-item>
+				<el-form-item label="优先级">
+				 <el-select v-model="formData.type" placeholder="请选择" :popper-append-to-body=false>
+				    <el-option
+				      key="1"
+				      label="全部"
+				      value="">
+				    </el-option>
+				   <el-option
+				 	key="2"
+				 	label="222"
+				 	value="2">
+				   </el-option>
+				  </el-select>
+				</el-form-item>
+			  </el-form>
+		  </div>
+		  <span slot="footer" class="dialog-footer">
+		    <el-button @click="closeVisible">取 消</el-button>
+		    <el-button type="primary" @click="save">确 定</el-button>
+		  </span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				formData:{},
+				sessionData:{}
+			}
+		},
+		props:{
+			setvisible:{
+				type:Boolean,
+				default:false
+			},
+			parentData:{
+				type:Object,
+				default: function () {
+				   return {}
+				}
+			}
+		},
+		watch:{
+			 parentData(nval, oval){
+				 console.log(nval, oval)
+			  this.sessionData=JSON.parse(JSON.stringify(nval));
+			  this.formData=nval;
+			  console.log(this.formData)
+			}
+		},
+		mounted(){
+			console.log('mounted',this.formData)
+		},
+		methods:{
+			handleClose(){
+				this.$emit('update:setvisible',false)
+			},
+			closeVisible(){
+				for(var key in this.sessionData){
+					this.formData[key]=this.sessionData[key]
+				}
+				this.$emit('update:setvisible',false)
+			},
+			save(){
+				this.sessionData=JSON.parse(JSON.stringify(this.formData));
+				this.$emit('update:parentData',this.formData);
+				this.$emit('update:setvisible',false)
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
--- a/src/views/taskManage/editVideo.vue
+++ b/src/views/taskManage/editVideo.vue
+<template>
+	<div>
+		<el-dialog
+		  title="视频源配置修改"
+		  top="12vh"
+		  :visible.sync="setvisible"
+		  width="906px"
+		  :before-close="handleClose">
+		  <!-- 内层dialog -->
+		  <el-dialog
+		        width="630px"
+		        title="视频迁移"
+		        :visible.sync="innerVisible"
+		        append-to-body>
+					  <el-table
+					  height="286"
+						  :data="taskData"
+						  stripe
+						  border
+						  style="width: 100%">
+						  <el-table-column
+									  align="center"
+							prop="name"
+							label="任务名称">
+						  </el-table-column>
+						  <el-table-column
+							  align="center"
+							prop="status"
+							label="状态">
+							<template slot-scope="scope">
+								 <el-tag
+								    :key="scope.$index"
+								    type="warning"
+								    effect="dark">
+								    {{ scope.row.status}}
+								  </el-tag>
+							</template>
+						  </el-table-column>
+						  <el-table-column
+							  align="center"
+							prop="type"
+							label="算法类型">
+						  </el-table-column>
+						  <el-table-column
+							  align="center"
+							prop="set"
+							label="储存配置">
+						  </el-table-column>
+						  <el-table-column
+							  align="center"
+							prop="per"
+							label="场景占用">
+							
+						  </el-table-column>
+						</el-table>
+		      </el-dialog>
+		  <div>
+			  <!-- 外层内容 -->
+			  <div class="leftBox">
+				  <div class="titles">视频设备</div>
+				  <div class="treeBox">
+					  <el-tree
+					    :data="data"
+					    :props="defaultProps"
+					    accordion
+						highlight-current
+						:expand-on-click-node=false
+					    @node-click="handleNodeClick">
+						<span class="custom-tree-node" slot-scope="{ node, data }">
+						        <span @click.stop="() => selectVideo(data)">{{ node.label }}</span>
+						        <span v-if="!node.children" class="iconfont icon-bofang1 bofangIcon" @click.stop="() =>playVideo(data)"></span>
+						      </span>
+					  </el-tree>
+				  </div>
+			  </div>
+			  <div class="rightBox">
+				  <div class="imgBox">
+					  <img src="../../assets/img/taskmanage/weather.png" alt="">
+				  </div>
+				  <div class="tableBox">
+					  <el-table
+					  height="286"
+					      :data="tableData"
+					  				  stripe
+					      border
+					      style="width: 100%">
+					      <el-table-column
+					  				  align="center"
+					        prop="name"
+					        label="视频源名称">
+					      </el-table-column>
+					      <el-table-column
+							  align="center"
+					        prop="status"
+					        label="视频状态">
+					      </el-table-column>
+						  <el-table-column
+							  align="center"
+							  width="136"
+							prop="operation"
+							label="视频操作">
+							<template slot-scope="scope">
+								<el-tooltip content="迁移" placement="bottom" effect="light" :visible-arrow=false>
+									<span class="iconfont icon-Migration  moveIcon"   @click="moveFun(scope.$index, scope.row)"></span>
+								</el-tooltip>
+								<span class="tableSpanBorder"></span>
+								<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
+									<span class="iconfont icon-detail  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
+								</el-tooltip>
+							</template>
+						  </el-table-column>
+					    </el-table>
+				  </div>
+			  </div>
+			  <div style="clear: both;"></div>
+		  </div>
+		  <span slot="footer" class="dialog-footer">
+		    <el-button @click="closeVisible">取 消</el-button>
+		    <el-button type="primary" @click="save">确 定</el-button>
+		  </span>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				innerVisible:false,
+				tableData:[{
+					"name":111,
+					"status":22
+				},
+				{
+					"name":111,
+					"status":22
+				}],
+				taskData:[
+					{
+						"name":111,
+						"status":22,
+						"type":33,
+						"set":44,
+						"per":55
+					},
+				],
+				formData:{},
+				sessionData:{},
+				data: [{
+				  label: '一级 1',
+				  children: [{
+					label: '二级 1-1',
+					children: [{
+					  label: '三级 1-1-1'
+					}]
+				  }]
+				}, {
+				  label: '一级 2',
+				  children: [{
+					label: '二级 2-1',
+					children: [{
+					  label: '三级 2-1-1'
+					}]
+				  }, {
+					label: '二级 2-2',
+					children: [{
+					  label: '三级 2-2-1'
+					}]
+				  }]
+				}, {
+				  label: '一级 3',
+				  children: [{
+					label: '二级 3-1',
+					children: [{
+					  label: '三级 3-1-1'
+					}]
+				  }, {
+					label: '二级 3-2',
+					children: [{
+					  label: '三级 3-2-1'
+					}]
+				  }]
+				}],
+				 defaultProps: {
+				  children: 'children',
+				  label: 'label'
+				}
+			}
+		},
+		props:{
+			setvisible:{
+				type:Boolean,
+				default:false
+			},
+			parentData:{
+				type:Object,
+				default: function () {
+				   return {}
+				}
+			}
+		},
+		watch:{
+			 parentData(val){
+			  this.sessionData=JSON.parse(JSON.stringify(val));
+			  this.formData=val;
+			}
+		},
+		mounted(){
+			console.log(this.setvisible)
+		},
+		methods:{
+			selectVideo(data){
+				console.log('a',data)
+			},
+			playVideo(data){
+				console.log('b',data)
+			},
+			append(data) {
+			        const newChild = { id: id++, label: 'testtest', children: [] };
+			        if (!data.children) {
+			          this.$set(data, 'children', []);
+			        }
+			        data.children.push(newChild);
+			      },
+			
+			      remove(node, data) {
+			        const parent = node.parent;
+			        const children = parent.data.children || parent.data;
+			        const index = children.findIndex(d => d.id === data.id);
+			        children.splice(index, 1);
+			      },
+			 handleNodeClick(data) {
+				console.log(data);
+			  },
+			handleClose(){},
+			closeVisible(){
+				for(var key in this.sessionData){
+					this.formData[key]=this.sessionData[key]
+				}
+				this.$emit('update:setvisible',false)
+			},
+			save(){
+				this.sessionData=JSON.parse(JSON.stringify(this.formData));
+				this.$emit('update:parentData',this.formData);
+				this.$emit('update:setvisible',false)
+			},
+			delFun(index,row){
+				
+			},
+			moveFun(index,row){
+				this.innerVisible=true;
+			}
+		}
+	}
+</script>
+
+<style scoped="scoped" lang="scss">
+	.bofangIcon{
+		cursor: pointer;
+		color:#cccccc;
+		font-size:16px;
+		margin-left: 26px;
+	}
+	.moveIcon{
+		cursor: pointer;
+		color:#34b3a2;
+		font-size:16px;
+	}
+	.delIcon{
+		cursor: pointer;
+		color:#f2365a;
+		font-size:16px;
+	}
+	.leftBox{
+		width: 233px;
+		height: 630px;
+		border:1px solid rgba(229,229,229,1);
+		float: left;
+	}
+	.titles{
+		height: 30px;
+		line-height: 30px;
+		padding-left: 13px;
+		background: $title-backgroud;
+		font-size: 14px;
+		color: $title-color;
+	}
+	.treeBox{
+		padding: 6px;
+	}
+	.rightBox{
+		float: left;
+		margin-left: 14px;
+	}
+	.imgBox{
+		width: 587px;
+		height: 330px;
+		border:1px solid #444444;
+		margin-bottom: 14px;
+	}
+</style>
--- a/src/views/taskManage/index.vue
+++ b/src/views/taskManage/index.vue
+<template>
+  <div class="contentBox">
+	  <div class="topCon">
+		  <div class="left">
+			  <img src="../../assets/img/taskmanage/weather.png" alt="">
+			  <span class="textCon">
+				  <div class="topText">21°/31°</div>
+				  <div class="bottomText">西北风1级 空气优</div>
+			  </span>
+		  </div>
+		  <div class="right">
+			  <div class="rightBox">
+				  <img src="../../assets/img/taskmanage/pic1.png" alt="">
+				  <span class="textCon">
+					  <div class="topText">80</div>
+					  <div class="bottomText">可用分析资源</div>
+				  </span>
+			  </div>
+			  <span class="border"></span>
+			  <div class="rightBox">
+				  <img src="../../assets/img/taskmanage/pic2.png" alt="">
+				  <span class="textCon">
+					  <div class="topText">80</div>
+					  <div class="bottomText">在用分析资源</div>
+				  </span>
+			  </div>
+			  <span class="border"></span>
+			  <div class="rightBox">
+				  <img src="../../assets/img/taskmanage/pic3.png" alt="">
+				  <span class="textCon">
+					  <div class="topText">80</div>
+					  <div class="bottomText">任务数量</div>
+				  </span>
+			  </div>
+		  </div>
+	  </div>
+	  <div class="content">
+		  <div style="padding: 20px 15px 20px 23px;">
+			  <span class="inputBox">
+				  <el-input v-model="task_name" placeholder="请输入任务名称"></el-input>
+			  </span>
+			  <span class="selectBox">
+				  <el-select  v-model="task_algo_type"  placeholder="请选择" :popper-append-to-body=false>
+				  	<el-option value="" label='全部'></el-option>
+				  	<el-option value="0" label='交通'></el-option>
+				  	<el-option value="1" label='客流'></el-option>
+				  	<el-option value="2" label='行为分析'></el-option>
+				  	<el-option value="7" label='综合流量'></el-option>
+				  	<!-- <el-option value="4" label='人脸'></el-option> -->
+				  </el-select>
+			  </span>
+			  <el-button type="primary" style="position: relative;top: -2px;" @click="query">查询</el-button>
+			  <span style="float: right;">
+				  <el-button type="info" icon="el-icon-search">新建任务</el-button>
+			  </span>
+		  </div>
+		  <div  style="padding: 0 15px 20px 23px;">
+			  <el-table
+			  height="574"
+			      :data="tableData"
+				  stripe
+			      border
+			      style="width: 100%">
+			      <el-table-column
+				  align="center"
+			        prop="num"
+					:formatter="numFormatter"
+			        label="序号">
+			      </el-table-column>
+			      <el-table-column
+			        prop="task_name"
+					align="center"
+			        label="任务名称">
+			      </el-table-column>
+			      <el-table-column
+					  align="center"
+			        prop="status"
+					:formatter="statusFormatter"
+			        label="状态">
+			      </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="task_algo_type"
+					:formatter="typeFormatter"
+				    label="算法类型">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="store_conf.name"
+				    label="存储配置">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="workers_count"
+				    label="场景占用">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="workers_count"
+				    label="资源用量">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="priority"
+					:formatter="priorityFormatter"
+				    label="优先级">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+				    prop="start_dt"
+					width="200"
+					:formatter="dateFormatter"
+				    label="时间计划">
+				  </el-table-column>
+				  <el-table-column
+					  align="center"
+					  width="300"
+				    prop="operation"
+				    label="操作">
+					<template slot-scope="scope">
+						<el-tooltip content="修改视频源配置" placement="bottom" effect="light" :visible-arrow=false>
+							<span class="iconfont icon-xiugai editIcon"   @click="editVideo(scope.$index, scope.row)"></span>
+						</el-tooltip>
+						<span class="tableSpanBorder"></span>
+						<el-tooltip content="修改任务源配置" placement="bottom" effect="light" :visible-arrow=false>
+							<span class="iconfont icon-xiugai editIcon2"   @click="editTask(scope.$index, scope.row)"></span>
+						</el-tooltip>
+						<span class="tableSpanBorder"></span>
+						<el-tooltip content="启动" placement="bottom" effect="light" :visible-arrow=false>
+							<span class="iconfont icon-bofang playIcon"   @click="playFun(scope.$index, scope.row)"></span>
+						</el-tooltip>
+						<span class="tableSpanBorder"></span>
+						<el-tooltip content="暂停" placement="bottom" effect="light" :visible-arrow=false>
+							<span class="iconfont icon-zanting  pauseIcon"   @click="pauseFun(scope.$index, scope.row)"></span>
+						</el-tooltip>
+						<span class="tableSpanBorder"></span>
+						<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow=false>
+							<span class="iconfont icon-detail  delIcon"   @click="delFun(scope.$index, scope.row)"></span>
+						</el-tooltip>
+					</template>
+				  </el-table-column>
+			    </el-table>
+				<div style="margin-top: 28px;">
+					<el-pagination
+					style="float: right;"
+					  background
+					  prev-text="上一页"
+					  next-text="下一页"
+					   :page-sizes="[30, 50, 100, 200]"
+					  layout="prev, pager, next,sizes"
+					  :current-page="page"
+					  @size-change="handleSizeChange"
+					  @current-change="handleCurrentChange"
+					  :total="total">
+					</el-pagination>
+					<div style="clear: both;"></div>
+				</div>
+				
+		  </div>
+			<editset :setvisible.sync="setShow" :parentData="editForm"></editset>
+			<editvideo :setvisible.sync="videoShow"></editvideo>
+	  </div>
+  </div>
+</template>
+<script>
+	import editset from './editSet'
+	import editvideo from './editVideo'
+	export default {
+		data(){
+			return{
+				task_name:'',
+				task_algo_type:'',
+				total:0,
+				page:1,
+				pageSize:30,
+				setShow:false,
+				videoShow:false,
+				editForm:{},
+				tableData: []
+			}
+		},
+		components:{
+			editset,editvideo
+		},
+		mounted(){
+			this.getTaskList();
+		},
+		methods:{
+			statusFormatter(row, column, cellValue, index){
+				if(cellValue == 'Running'){
+					return '工作中'
+				}else if(cellValue == 'Finished'){
+					return '已完成'
+				}else if(cellValue == 'Pause'){
+					return '暂停'
+				}else if(cellValue == 'Error'){
+					return '异常'
+				}else if(cellValue == 'Deleted'){
+					return '已删除'
+				}else {
+					return '未部署'
+				}
+			},
+			priorityFormatter(row, column, cellValue, index) {
+				if(cellValue == 'high'){
+					return '高'
+				}else if(cellValue == 'normal'){
+					return '中'
+				}else if(cellValue == 'low'){
+					return '低'
+				}else {
+					return '未知'
+				}
+			},
+			dateFormatter(row, column, cellValue, index){
+				let startDate=cellValue ? cellValue.split(' ')[0]:'';
+				let endDate=row.end_dt ? row.end_dt.split(' ')[0]:'';
+				return startDate+' ~ '+endDate;
+			},
+			typeFormatter(row, column, cellValue, index) {
+				if(cellValue == 0){
+					return '交通'
+				}else if(cellValue == 1){
+					return '客流'
+				}else if(cellValue == 2){
+					return '行为分析'
+				}else if(cellValue == 3){
+					return '违停'
+				}else if(cellValue == 5){
+					return '交通行人'
+				}else if(cellValue == 7){
+					return '综合流量'
+				}else {
+					return '未知'
+				}
+			},
+			numFormatter(row, column, cellValue, index) {
+				return (index+1)*this.page;
+			},
+			handleSizeChange(val) {
+				this.pageSize=val;
+				this.getTaskList();
+			},
+			handleCurrentChange(val) {
+				this.page=val;
+				this.getTaskList();
+			  },
+			query(){
+				this.getTaskList();
+			},
+			getTaskList(){
+				this.tableData=[];
+				let offset = (this.page - 1) * this.pageSize;
+				this.$api.task.tasks({
+					limit: this.pageSize,
+					offset: offset,
+					task_algo_type: this.task_algo_type,
+					source_type: "pull_video_stream",
+					task_type: "normal",
+					task_name: this.task_name
+				}).then((res)=>{
+					this.total=res.total_num;
+					
+					if(res.list_data==null){
+						this.tableData=[]
+					}else{
+						res.list_data.forEach(item=>{
+							if(item.start_dt){
+								//先转utc格式
+								let date=this.$moment.utc(item.start_dt).format();
+								//再utc时间转本地时间
+								item.start_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss')
+							}
+							if(item.end_dt){
+								//先转utc格式
+								let date=this.$moment.utc(item.end_dt).format();
+								//再utc时间转本地时间
+								item.end_dt=this.$moment(date).local().format('YYYY-MM-DD HH:mm:ss')
+							}
+						})
+						this.tableData=res.list_data;
+					}
+				}).catch((error)=>{
+					
+				})
+			},
+			editVideo(index,row){
+				this.videoShow=true;
+				console.log(row)
+			},
+			editTask(index,row){
+				this.setShow=true;
+				this.$nextTick(() => {
+					this.editForm=row;
+				})
+				
+			},
+			playFun(index,row){
+				console.log(row)
+			},
+			pauseFun(index,row){
+				console.log(row)
+			},
+			delFun(index,row){
+				console.log(row)
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+	.topCon{
+		background: $white-back-color;
+		margin-bottom: 12px;
+		height: 100px;
+		.left{
+			display: inline-block;
+			margin: {
+				top: 22px;
+				left: 30px;
+			};
+			img{
+				width:65px ;
+				height: 55px;
+				margin-right: 11px;
+			}
+			.topText{
+				font-size:24px;
+				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
+				font-weight:bold;
+				margin-bottom: 4px;
+			}
+			.bottomText{
+				font-size:14px;
+				font-family:MicrosoftYaHeiUI;
+			}
+		}
+		.right{
+			float: right;
+			.topText{
+				font-size:28px;
+				font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
+				font-weight:bold;
+			}
+			.bottomText{
+				position: relative;
+				    top: -1px;
+				font-size:14px;
+				font-family:MicrosoftYaHeiUI;
+			}
+		}
+		.textCon{
+			display: inline-block;
+			vertical-align: top;
+		}
+		.border{
+			display: inline-block;
+			height: 40px;
+			border: {
+				left: 2px solid $border-color;
+			};
+		}
+		.rightBox{
+			margin-top: 14px;
+			display: inline-block;
+			img{
+				margin:{
+					top:15px;
+					right: 22px;
+				}
+			}
+		}
+		.rightBox:nth-of-type(1){
+			img{
+				width: 34px;
+				height: 34px;
+			}
+			.textCon{
+				margin-right:114px ;
+			}
+		}
+		.rightBox:nth-of-type(2){
+			    position: relative;
+			    top: 4px;
+			img{
+				width: 40px;
+				height: 40px;
+				margin-left: 102px;
+			}
+			.textCon{
+				margin-right:101px ;
+			}
+		}
+		.rightBox:nth-of-type(3){
+			img{
+				width: 34px;
+				height: 35px;
+				margin-left: 104px;
+			}
+			.textCon{
+				margin-right:184px ;
+			}
+		}
+	}
+	.content{
+		background: #FFFFFF;
+	}
+	.inputBox{
+		margin-right: 20px;
+	}
+	.selectBox{
+		margin-right: 20px;
+	}
+	.editIcon{
+		cursor: pointer;
+		color:#0069ff;
+		font-size:16px;
+	}
+	.editIcon2{
+		cursor: pointer;
+		color:#87d14b;
+		font-size:16px;
+	}
+	.playIcon{
+		cursor: pointer;
+		color:#34b3a2;
+		font-size:16px;
+	}
+	.pauseIcon{
+		cursor: pointer;
+		color:#ffc62e;
+		font-size:14px;
+	}
+	.delIcon{
+		cursor: pointer;
+		color:#f2365a;
+		font-size:16px;
+	}
+</style>
\ No newline at end of file
--- a/tests/unit/.eslintrc.js
+++ b/tests/unit/.eslintrc.js
+module.exports = {
+  env: {
+    mocha: true
+  }
+};
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
+import { expect } from "chai";
+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()).to.include(msg);
+  });
+});
--- a/vue.config.js
+++ b/vue.config.js
+module.exports = {
+  // ...
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData:  '@import "@/assets/scss/common.scss";' 
+      }
+    }
+  }
+}
\ No newline at end of file