初始化

src/App.vue

+<template>
+  <div
+    id="app"
+    :style="$route.path != '/login'&&$route.path != '/gwIndex' ? 'overflow-y: auto' : 'overflow:hidden'"
+  >
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  created(){
+  }
+}
+/* setInterval(function() {
+  check()
+}, 4000);
+var check = function() {
+  function doCheck(a) {
+    if (("" + a/a)["length"] !== 1 || a % 20 === 0) {
+      (function() {}
+        ["constructor"]("debugger")())
+    } else {
+      (function() {}
+        ["constructor"]("debugger")())
+    }
+    doCheck(++a)
+  }
+  try {
+    doCheck(0)
+  } catch (err) {}
+};
+check();*/
+</script>

src/api/api.js

+// eslint-disable-next-line no-unused-vars
+import { getAction, postAction } from './manage'
+import { encrypt } from '@/utils/rsaEncrypt'
+// 登录
+const Login = (params) => postAction('/yh/login', params)
+// 注册
+const Register = (params) => postAction('/yh/saveOrUpdateRbacYh', params)
+// 注册
+const sendMail = (mail, subject, content, isHtml = false) => postAction(`/mail/sendMail?mail=${mail}&subject=${subject}&content=${content}&isHtml=${isHtml}`, {})
+// 获取用户信息
+const GetInfo = (params) => getAction('/yh/getInfo', params)
+// 重新获取Tokn
+const ResetToken = (params) => postAction(import.meta.env.VITE_APP_SERVER_BASESYS + '/rbac/resetToken', params)
+// 退出登录
+const Logout = (params) => getAction('/yh/logout', params)
+
+const getAnByQxbs = (params) => getAction(import.meta.env.VITE_APP_SERVER_BASESYS + '/rbac-an/getAnByQxbs', params)
+export {
+  Login,
+  Register,
+  sendMail,
+  GetInfo,
+  ResetToken,
+  Logout,
+  getAnByQxbs
+}

src/api/background/announcement.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 文章发布信息分页
+const querykyZxfbglByPage = (data) => postAction('/zxfb/querykyZxfbglByPage', data)
+//保存和修改
+const saveOrUpdatekyZxfbgl = (data) => postAction('/zxfb/saveOrUpdatekyZxfbgl', data)
+//删除文章发布信息
+const removekyZxfbgl = (data) => deleteAction('/zxfb/removekyZxfbgl', data)
+
+
+export {
+    querykyZxfbglByPage,
+    saveOrUpdatekyZxfbgl,
+    removekyZxfbgl
+}

src/api/background/peopleManagement.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 课题人员管理
+
+//分页
+const queryKtryPage = (data) => postAction('/ry/queryKtryPage', data)
+//保存和修改
+const saveOrUpdateKtry = (data) => postAction('/ry/saveOrUpdateKtry', data)
+//删除
+const removeKtry = (data) => deleteAction('/ry/removeKtry', data)
+
+
+export {
+    queryKtryPage,
+    saveOrUpdateKtry,
+    removeKtry
+}

src/api/background/siteName.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 获取网站配置信息
+const getWzmcpz = (data) => getAction('/mcpz/getWzmcpz', data)
+//保存和修改
+const saveOrUpdateWzmcpz = (data) => postAction('/mcpz/saveOrUpdateWzmcpz', data)
+//发布网站配置信息
+const fbWzxxById = (data) => deleteAction('/mcpz/fbWzxxById', data)
+
+
+export {
+    getWzmcpz,
+    saveOrUpdateWzmcpz,
+    fbWzxxById
+}

src/api/encrypt.js

+import { axios } from './request'
+import { encryptDes } from '@/utils/rsaEncrypt'
+import { getCasual } from '@/utils/auth'
+// post
+export function postEncryptAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'post',
+    data: encryptDes(parameter, getCasual())
+  })
+}
+
+// post method= {post | put}
+export function httpEncryptAction(url, parameter, method) {
+  return axios({
+    url: url,
+    method: method,
+    data: encryptDes(parameter, getCasual())
+  })
+}
+
+// put
+export function putEncryptAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'put',
+    data: encryptDes(parameter, getCasual())
+  })
+}
+
+// get
+export function getEncryptAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter
+  })
+}
+
+// deleteAction
+export function deleteEncryptAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'delete',
+    params: parameter
+  })
+}

src/api/file.js

+import { axios } from './request'
+// post
+function postAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter
+  })
+}
+// 普通上传
+const getFile = (params) => postAction('/wj/FilesUpload', params)
+
+// 下载私有图片的地址
+const getFileXz = (parameter) => getAction('/resource/down', parameter)
+
+// 将上传的文件打包为后端接收的格式
+// 如果传入了 上传方法 则返回执行后的返回值
+const fileData = (file, fun) => {
+  const formData = new FormData()
+  console.log(file.file)
+  formData.append('file', file.file)
+  if (fun === null || fun === undefined || fun === '' || fun === 'null') {
+    return formData
+  } else {
+    return fun(formData)
+  }
+}
+
+export {
+  getFile,
+  getFileXz,
+  fileData
+}

src/api/manage.js

+import { axios } from './request'
+
+// post
+export function postAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'post',
+    data: parameter
+  })
+}
+
+// post method= {post | put}
+export function httpAction(url, parameter, method) {
+  return axios({
+    url: url,
+    method: method,
+    data: parameter
+  })
+}
+
+// put
+export function putAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'put',
+    data: parameter
+  })
+}
+
+// get
+export function getAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter
+  })
+}
+
+// deleteAction
+export function deleteAction(url, parameter) {
+  return axios({
+    url: url,
+    method: 'delete',
+    params: parameter
+  })
+}

src/api/officialWebsite/home.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 官网首页
+
+//首页分板块查询文章信息
+const getGwZxfbxx = (data) => getAction('zxfb/getGwZxfbxx', data)
+//官网查询近日要闻
+const getJryw = (data) => getAction('zxfb/getJryw', data)
+
+
+//获取文章信息并增加浏览量
+const getWzxx = (data) => getAction('zxfb/getWzxx', data)
+
+
+//热点资讯
+const getRdzx = (data) => getAction('zxfb/getRdzx', data)
+
+//研究进展list
+const getZxfbList = (data) => getAction('zxfb/getZxfbList', data)
+export {
+    getGwZxfbxx,
+    getJryw,
+    getWzxx,
+    getRdzx,
+    getZxfbList
+    
+}

src/api/request.js

+/*
+ * @Author: truman
+ * @Description:
+ * @Date: 2021-12-29 10:04:27
+ * @LastEditTime: 2021-12-29 10:33:24
+ * @FilePath: \website\src\network\request.js
+ */
+import axios from 'axios'
+import {
+  MessageBox,
+  Message
+} from 'element-ui'
+import {
+} from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+/**
+ * 通过 vue.config.js,映射后端域名
+ * 创建 axios 实例
+ */
+const service = axios.create({
+  // baseURL: process.env.VUE_APP_BASE_API,
+  baseURL: '/backend',
+  timeout: 50000
+})
+// 响应拦截
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    // 内网穿透环境下，截取响应码为400或500时响应拦截
+    // 接口响应后延时关闭加载
+    if (parseInt(res.code) === 330) {
+      Message({
+        message: res.message || '登录失败！',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.message || '登录失败'))
+    } else if (parseInt(res.code) === 203) {
+      // to re-login
+      MessageBox.confirm('您的登录已失效，可以取消以留在此页面，或再次登录', '登录失效', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        store.dispatch('user/resetToken').then(() => {
+          location.reload()
+        })
+      })
+    } else if (parseInt(res.code) !== 200) {
+      Message({
+        message: res.message || '查询失败',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.msg || '查询失败'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    let status = null
+    if (error.request) {
+      status = error.request
+    } else if (error.response) {
+      status = error.response
+    }
+    if (status) {
+      switch (status.status) {
+        case 400:
+          error.message = '(400)'
+          break
+        case 403:
+          error.message = '(403)'
+          break
+        case 404:
+          error.message = '(404)'
+          break
+        case 408:
+          error.message = '(408)'
+          break
+        case 500:
+          error.message = '(500)'
+          break
+        case 501:
+          error.message = '(501)'
+          break
+        case 502:
+          error.message = '(502)'
+          break
+        case 503:
+          error.message = '(503)'
+          break
+        case 504:
+          error.message = '(504)'
+          break
+        case 505:
+          error.message = '(505)'
+          break
+        default:
+          error.message = status.error
+      }
+    }
+    Message({
+      message: '服务器繁忙，请稍后重试！' + error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+// todo 请求拦截,绑定用户令牌token。路由白名单。
+service.interceptors.request.use(config => {
+  config.baseURL = import.meta.env.VITE_APP_BASE_API
+  console.log(import.meta.env.VITE_APP_BASE_API)
+  // 请求接口时加载
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token，可根据实际情况修改。
+    config.headers['token'] = getToken()
+    // config.headers['requestTime'] = getCurrenTimestampt() // 每次请求都带上当前时间戳，超过一定时间的接口不响应
+  }
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+export {
+  service as axios
+}

src/api/requestfile.js

+/*
+ * @Author: truman
+ * @Description:
+ * @Date: 2021-12-29 10:04:27
+ * @LastEditTime: 2021-12-29 10:33:24
+ * @FilePath: \website\src\network\request.js
+ */
+import axios from 'axios'
+import { Message } from 'element-ui'
+import {} from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+/**
+ * 通过 vue.config.js,映射后端域名
+ * 创建 axios 实例
+ */
+const service = axios.create({
+  baseURL: '/api', // api base_url
+  timeout: 50000 // 请求超时时间
+})
+// 响应拦截
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    if (res.code !== '200') {
+      Message({
+        message: res.message || 'Error',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(new Error(res.msg || 'Error'))
+    } else {
+      return res
+    }
+  },
+  error => {
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+// todo 请求拦截,绑定用户令牌token。路由白名单。
+service.interceptors.request.use(config => {
+  // 请求接口时加载
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token，可根据实际情况修改。
+    // config.headers['requestTime'] = getCurrenTimestampt() // 每次请求都带上当前时间戳，超过一定时间的接口不响应
+  }
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+
+export {
+  service as axios
+}

src/api/system/achievement.js

+import {postAction,deleteAction} from "../manage"
+
+//科研成果管理
+
+//分页
+const findCgglByPage = (data) => postAction('/cggl/findCgglByPage',data)
+//新增修改
+const saveOrUpdateKyCggl = (data) => postAction('/cggl/saveOrUpdateKyCggl',data)
+//删除
+const removeCggl = (data) => deleteAction('/cggl/removeCggl',data)
+
+export {
+    findCgglByPage,
+    saveOrUpdateKyCggl,
+    removeCggl
+}
\ No newline at end of file

src/api/system/menu.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 查询用户列表
+const findCdxxByPage = (data) => postAction('/cd/findCdxxByPage', data)
+//保存和修改
+const saveOrUpdateCdxx = (data) => postAction('/cd/saveOrUpdateCdxx', data)
+//删除
+const removeCdxx = (data) => deleteAction('/cd/removeCdxx', data)
+
+const findCdList = (data) => getAction('/cd/findCdList', data)
+//动态路由
+const getRouters = (data) => getAction('/cd/getMenuTree', data)
+
+
+
+export {
+    findCdxxByPage,
+    saveOrUpdateCdxx,
+    removeCdxx,
+    findCdList,
+    getRouters
+}

src/api/system/rbacYh.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 查询用户列表
+const queryYhxxByPage = (data) => postAction('/yh/queryYhxxByPage', data)
+//保存和修改
+const saveOrUpdateRbacYh = (data) => postAction('/yh/saveOrUpdateRbacYh', data)
+//删除
+const removeYhxx = (data) => deleteAction('/yh/removeYhxx', data)
+
+//用户角色关联
+const getyhgljsAllList = (data) => getAction('/yh/getyhgljsAllList', data)
+
+
+
+export {
+    queryYhxxByPage,
+    saveOrUpdateRbacYh,
+    removeYhxx,
+    getyhgljsAllList
+}

src/api/system/role.js

+import { deleteAction, getAction, postAction } from '../manage'
+
+// 查询用户列表
+const queryYhxxByJsAndPage = (data) => postAction('/js/findYhxxByJsAndPage', data)
+const findJsxxByPage = (data) => postAction('/js/findJsxxByPage', data)
+//保存和修改
+const saveOrUpdateJsxx = (data) => postAction('/js/saveOrUpdateJsxx', data)
+//删除
+const removeJsxx = (data) => deleteAction('/js/removeJsxx', data)
+//查上级菜单数据
+const findJsList = (data) => getAction('/js/findJsList', data)
+//查询角色 关联菜单
+const getAllList = (data) => getAction('/js/getAllList', data)
+
+
+export {
+  queryYhxxByJsAndPage,
+  findJsxxByPage,
+  saveOrUpdateJsxx,
+  removeJsxx,
+  findJsList,
+  getAllList
+}

src/api/system/subjectToRelease.js

+import {postAction,deleteAction,getAction} from "../manage"
+
+//课题管理管理
+//分页
+const findKtglByPage = (data) => postAction('/ktgl/findKtglByPage',data)
+//新增修改
+const saveOrUpdateKyKtgl = (data) => postAction('/ktgl/saveOrUpdateKyKtgl',data)
+//删除
+const removeKtgl = (data) => deleteAction('/ktgl/removeKtgl',data)
+
+//项目管理
+//查询项目信息
+const findKyXmglList = (data) => getAction('/xmgl/findKyXmglList',data)
+
+//项下面的课题list
+const getAllKtList = (data) => getAction('/ktgl/getAllKtList',data)
+
+//新增修改
+const saveOrUpdatekyXmgl = (data) => postAction('/xmgl/saveOrUpdatekyXmgl',data)
+
+//搜索人员信息
+const getKtryList = (data) => getAction('ry/getKtryList',data)
+//根据课题查询人员信息
+const getRyxx = (data) => getAction('ry/getRyxx',data)
+
+
+export {
+    findKtglByPage,
+    saveOrUpdateKyKtgl,
+    removeKtgl,
+    findKyXmglList,
+    saveOrUpdatekyXmgl,
+    getKtryList,
+    getRyxx,
+    getAllKtList
+}
\ No newline at end of file

src/api/weekly/index.js

+import { postAction, deleteAction, getAction } from '../manage'
+// todo: 添加了周报Api，等待整合
+const baseurl = 'https://www.fastmock.site/mock/eb70f1da70310a22e9b8eb1a1808207c'
+// 周报管理
+// 分页查询周报
+const findSendByPage = (data) => postAction('/zbgl/xx/findZbXxByPage', data)
+// 分页查询接收到的周报
+const findReceivedByPage = (data) => postAction(baseurl + '/zbgl/xx/findReceivedByPage', data)
+// 周报详细内容
+const getDetailById = (data) => getAction(baseurl + '/zbgl/detailById', data)
+// 提交
+const uploadWeekly = (data) => postAction('/zbgl/xx/saveOrUpdateZbXx', data)
+// 撤回
+const removeWeekly = (data) => deleteAction('/zbgl/xx/removeZbXx', data)
+// 周报评价
+const findCommitWeekly = (data) => postAction('/zbgl/pj/findZbPjByPage', data)
+// 周报评价
+const commitWeekly = (data) => postAction('/zbgl/pj/saveOrUpdateZbPj', data)
+// 周报统计
+const statisticWeekly = (data) => postAction(baseurl + '/zbgl/statisticWeekly', data)
+// 查询用户信息
+const queryYhgxByPage = (data) => postAction('/zbgl/cygx/findZbCygxByPage', data)
+const queryStuYhgxByPage = (data) => postAction('/zbgl/cygx/findThisWeekStuByPage', data)
+// 关联用户信息
+const saveOrUpdateYhxx = (data) => postAction('/zbgl/cygx/saveOrUpdateZbCygx', data)
+// 删除关联用户
+const removeYhxx = (data) => deleteAction('/zbgl/cygx/removeZbCygx', data)
+// 上传
+const fileUpload = (data) => postAction('/zbgl/file/filesUpload', data)
+// 下载
+const fileDownload = (data) => (`${import.meta.env.VITE_APP_BASE_API}/zbgl/file/fileDownLoad/${data}`)
+// 下载
+const getZbTerm = (data) => postAction('/zbgl/term/findZbTermByPage', data)
+const setZbTerm = (data) => postAction('/zbgl/term/saveOrUpdateZbTerm', data)
+
+export {
+  findSendByPage,
+  findReceivedByPage,
+  getDetailById,
+  uploadWeekly,
+  removeWeekly,
+  findCommitWeekly,
+  commitWeekly,
+  statisticWeekly,
+  queryYhgxByPage,
+  queryStuYhgxByPage,
+  saveOrUpdateYhxx,
+  removeYhxx,
+  fileUpload,
+  fileDownload,
+  setZbTerm,
+  getZbTerm
+}

src/components/BackToTop/index.vue

+<template>
+  <transition :name="transitionName">
+    <div
+      v-show="visible"
+      :style="customStyle"
+      class="back-to-ceiling"
+      @click="backToTop"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 17 17"
+        xmlns="http://www.w3.org/2000/svg"
+        class="Icon Icon--backToTopArrow"
+        aria-hidden="true"
+        style="height: 16px; width: 16px"
+      >
+        <path
+          d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"
+        />
+      </svg>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "BackToTop",
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 400,
+    },
+    backPosition: {
+      type: Number,
+      default: 0,
+    },
+    customStyle: {
+      type: Object,
+      default: function () {
+        return {
+          right: "50px",
+          bottom: "50px",
+          width: "40px",
+          height: "40px",
+          "border-radius": "4px",
+          "line-height": "45px",
+          background: "#e7eaf1",
+        };
+      },
+    },
+    transitionName: {
+      type: String,
+      default: "fade",
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      interval: null,
+      isMoving: false,
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll);
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.visible = window.pageYOffset > this.visibilityHeight;
+    },
+    backToTop() {
+      if (this.isMoving) return;
+      const start = window.pageYOffset;
+      let i = 0;
+      this.isMoving = true;
+      this.interval = setInterval(() => {
+        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
+        if (next <= this.backPosition) {
+          window.scrollTo(0, this.backPosition);
+          clearInterval(this.interval);
+          this.isMoving = false;
+        } else {
+          window.scrollTo(0, next);
+        }
+        i++;
+      }, 16.7);
+    },
+    easeInOutQuad(t, b, c, d) {
+      if ((t /= d / 2) < 1) return (c / 2) * t * t + b;
+      return (-c / 2) * (--t * (t - 2) - 1) + b;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.back-to-ceiling {
+  position: fixed;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+}
+
+.back-to-ceiling:hover {
+  background: #d5dbe7;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.back-to-ceiling .Icon {
+  fill: #9aaabf;
+  background: none;
+}
+</style>

src/components/Breadcrumb/index.vue

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

src/components/Charts/Keyboard.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+
+      const xAxisData = []
+      const data = []
+      const data2 = []
+      for (let i = 0; i < 50; i++) {
+        xAxisData.push(i)
+        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+      }
+      this.chart.setOption({
+        backgroundColor: '#08263a',
+        grid: {
+          left: '5%',
+          right: '5%'
+        },
+        xAxis: [{
+          show: false,
+          data: xAxisData
+        }, {
+          show: false,
+          data: xAxisData
+        }],
+        visualMap: {
+          show: false,
+          min: 0,
+          max: 50,
+          dimension: 0,
+          inRange: {
+            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+          }
+        },
+        yAxis: {
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#4a657a'
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#08263f'
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [{
+          name: 'back',
+          type: 'bar',
+          data: data2,
+          z: 1,
+          itemStyle: {
+            normal: {
+              opacity: 0.4,
+              barBorderRadius: 5,
+              shadowBlur: 3,
+              shadowColor: '#111'
+            }
+          }
+        }, {
+          name: 'Simulate Shadow',
+          type: 'line',
+          data,
+          z: 2,
+          showSymbol: false,
+          animationDelay: 0,
+          animationEasing: 'linear',
+          animationDuration: 1200,
+          lineStyle: {
+            normal: {
+              color: 'transparent'
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: '#08263a',
+              shadowBlur: 50,
+              shadowColor: '#000'
+            }
+          }
+        }, {
+          name: 'front',
+          type: 'bar',
+          data,
+          xAxisIndex: 1,
+          z: 3,
+          itemStyle: {
+            normal: {
+              barBorderRadius: 5
+            }
+          }
+        }],
+        animationEasing: 'elasticOut',
+        animationEasingUpdate: 'elasticOut',
+        animationDelay(idx) {
+          return idx * 20
+        },
+        animationDelayUpdate(idx) {
+          return idx * 20
+        }
+      })
+    }
+  }
+}
+</script>