菜单组件封装

README.md

@@ -3,8 +3,9 @@ vue 脚手架4.5.12搭建vue2项目
 # 基础组件：
 vue 2.6.11+ElementUI2.15.1+axios0.21.1+router3.2.0
 # 公共组件：
-Echarts5.0.2
-Excel：xlsx0.16.9
+Echarts5.0.2 报表
+Excel：vue-json-excel0.3.0 导出excel
+vuescroll：滚动条
 等
 
 
@@ -17,7 +18,8 @@ Router：index.js主路由和子路由，所有前端会分配子路由。
 Store：vuex，按需使用。
 Tools：公共JS方法，如日期格式化等。通过全局变量this.BASE.使用公用的方法。如有新的需求，可以自行添加，注释一定要详细明了。
 Views：所有页面。
-2.	Vue文件分割开，html写在vue文件中，js写在assets/js/模块名称/*.js，Scss文件写在assets/css/模块名称/*.js
+jsonData: 前端需要的数据
+2.	Vue文件分割开，html写在vue文件中，js写在assets/js/模块名称/*.js，Scss文件写在assets/css/模块名称/*.scss
 Vue文件引入方式： 
 
 ```
@@ -27,7 +29,7 @@ Vue文件引入方式：
 </script>
 
 <style lang="sass" scoped>
-  @import "../assets/css/main.less";
+  @import "../assets/css/main.scss";
 </style>
 ```
 
@@ -39,7 +41,8 @@ Vue文件引入方式：
 .set('@components', resolve('src/components'))
 .set('@views', resolve('src/views'))
 .set('@store', resolve('src/store'));
-```
+``` 
+
 例如：@import "../assets/css/main.less";改成@import "@assets/css/main.less";
 5.	Sass语法按照官方语法写，树级结构，使用class样式，不要使用id样式。
 6.	代码缩进，统一为2。设置方式：文件-首选项-设置，搜索tabsize。严格按照2的缩进编写代码，提高代码美观程度。

package-lock.json

@@ -2127,15 +2127,6 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
-    "adler-32": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
-      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
-      "requires": {
-        "exit-on-epipe": "~1.0.1",
-        "printj": "~1.1.0"
-      }
-    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/aggregate-error/download/aggregate-error-3.1.0.tgz",
@@ -3571,16 +3562,6 @@
         "url-to-options": "^1.0.1"
       }
     },
-    "cfb": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
-      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
-      "requires": {
-        "adler-32": "~1.2.0",
-        "crc-32": "~1.2.0",
-        "printj": "~1.1.2"
-      }
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
@@ -3921,22 +3902,6 @@
         "q": "^1.1.2"
       }
     },
-    "codepage": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
-      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
-      "requires": {
-        "commander": "~2.14.1",
-        "exit-on-epipe": "~1.0.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.14.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
-          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
-        }
-      }
-    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/collection-visit/download/collection-visit-1.0.0.tgz",
@@ -4375,15 +4340,6 @@
         }
       }
     },
-    "crc-32": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
-      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
-      "requires": {
-        "exit-on-epipe": "~1.0.1",
-        "printj": "~1.1.0"
-      }
-    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npm.taobao.org/create-ecdh/download/create-ecdh-4.0.4.tgz?cache=0&sync_timestamp=1596557456448&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcreate-ecdh%2Fdownload%2Fcreate-ecdh-4.0.4.tgz",
@@ -5356,6 +5312,11 @@
         }
       }
     },
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/duplexer/download/duplexer-0.1.2.tgz",
@@ -5791,11 +5752,6 @@
         }
       }
     },
-    "exit-on-epipe": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
-      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
-    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npm.taobao.org/expand-brackets/download/expand-brackets-2.1.4.tgz",
@@ -6108,11 +6064,6 @@
         "pend": "~1.2.0"
       }
     },
-    "fflate": {
-      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
-      "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
-    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/figgy-pudding/download/figgy-pudding-3.5.2.tgz",
@@ -6306,11 +6257,6 @@
       "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
       "dev": true
     },
-    "frac": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
-      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
-    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npm.taobao.org/fragment-cache/download/fragment-cache-0.2.1.tgz",
@@ -10662,11 +10608,6 @@
         "renderkid": "^2.0.4"
       }
     },
-    "printj": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
-      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz",
@@ -12038,14 +11979,6 @@
         }
       }
     },
-    "ssf": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
-      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
-      "requires": {
-        "frac": "~1.1.2"
-      }
-    },
     "sshpk": {
       "version": "1.16.1",
       "resolved": "https://registry.npm.taobao.org/sshpk/download/sshpk-1.16.1.tgz",
@@ -13220,6 +13153,14 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/vue-json-excel/-/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha512-FrSh0tVUpw4K+ilLO8g0Qp52eFJw/hkk3rZPTEKo9qVkJgVfQtZwzj3UWc5ACYxA3jLk9HtjK+f9xKHCN4Kgag==",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "vue-loader": {
       "version": "15.9.6",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.6.tgz",
@@ -13280,6 +13221,11 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuescroll": {
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.17.3.tgz",
+      "integrity": "sha512-5P3hje/fYjo1eAB0Y8zboLbaq/mnPNczYyZ1aPHHM6wIFKcqal9Mi42CBCZizUnEtoXtbsGlnyLcVbnalTNptA=="
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.6.2.tgz?cache=0&sync_timestamp=1612277435391&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvuex%2Fdownload%2Fvuex-3.6.2.tgz",
@@ -13963,16 +13909,6 @@
       "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
-    "wmf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
-      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
-    },
-    "word": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
-      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
-    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/worker-farm/download/worker-farm-1.7.0.tgz",
@@ -14049,30 +13985,6 @@
         "async-limiter": "~1.0.0"
       }
     },
-    "xlsx": {
-      "version": "0.16.9",
-      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.16.9.tgz",
-      "integrity": "sha512-gxi1I3EasYvgCX1vN9pGyq920Ron4NO8PNfhuoA3Hpq6Y8f0ECXiy4OLrK4QZBnj1jx3QD+8Fq5YZ/3mPZ5iXw==",
-      "requires": {
-        "adler-32": "~1.2.0",
-        "cfb": "^1.1.4",
-        "codepage": "~1.14.0",
-        "commander": "~2.17.1",
-        "crc-32": "~1.2.0",
-        "exit-on-epipe": "~1.0.1",
-        "fflate": "^0.3.8",
-        "ssf": "~0.11.2",
-        "wmf": "~1.0.1",
-        "word": "~0.3.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.17.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-          "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
-        }
-      }
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz",

package.json

@@ -16,9 +16,10 @@
     "element-ui": "^2.15.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue": "^2.6.11",
+    "vue-json-excel": "^0.3.0",
     "vue-router": "^3.2.0",
-    "vuex": "^3.4.0",
-    "xlsx": "^0.16.9"
+    "vuescroll": "^4.17.3",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/assets/css/a.scss

@@ -1,3 +0,0 @@
-*{
-  color: green;
-}

src/assets/css/base.scss

@@ -7,7 +7,7 @@ body {
   font-size: $font-size-base;
   font-weight: 500;
   font-family: "PingFangSC-Regular", "Microsoft YaHei", "微软雅黑";
-  color: $text-color;
+  color: $font-color-base;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -150,7 +150,7 @@ ol {
 }
 
 a {
-  color: $text-color;
+  color: $font-color-base;
   text-decoration: none;
 }
 
@@ -339,13 +339,13 @@ img {
 }
 
 /***框架样式 - 开始***/
-// html,
-// body,
-// #app {
-//   height: 100%;
-//   overflow: hidden;
-//   position: relative;
-//   z-index: 1;
-// }
+html,
+body,
+#app {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
 
 /***框架样式 - 结束***/

src/assets/css/default.scss

@@ -1,3 +1,3 @@
 
 $font-size-base: 14px; // 主字号
-$text-color: red; // 全局字体颜色
+$font-color-base: #222; // 全局基础文字颜色

src/assets/css/main.scss

@@ -0,0 +1,12 @@
+$top-height: 100px;
+.page{
+  >.top{
+    height: $top-height;
+    .logo{
+      height: 40px;
+    }
+  }
+  >.main{
+    height: calc(100vh - #{$top-height});
+  }
+}

src/assets/js/main.js

@@ -1,17 +1,22 @@
+import menuData from "@jsonData/menu.json"
+import menuZj from "@components/common/menu"
 export default {
   data() {
     return {
-      activeIndex: '1',
-      activeIndex2: '1'
+      menuIndex: '1', // 菜单默认选中项
+      menu: [], // 菜单数据
     }
   },
+  components: {
+    menuZj
+  },
   created: function() {
     this.init();
   },
   methods: {
     // 初始化
     init() {
-      console.log("测试")
+      this.menu = menuData.menu;
       // this.API.get('/powercompare/windfarmAjax').then(res => {
       //   console.log(res)
       //   // if (res.code === 200) {
@@ -20,8 +25,5 @@ export default {
   
       // });
     },
-    handleSelect(key, keyPath) {
-      console.log(key, keyPath);
-    }
   }
 }

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<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>
-    </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>

src/components/common/menu.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-menu v-if="menuIndex !== undefined" :default-active="menuIndex"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal">
+    <template v-for="(item, i) in menu">
+      <el-menu-item :key="i" v-if="item.children.length === 0" :index="(i+1)+''" @click="menuC(item.url)">{{item.name}}</el-menu-item>
+      <menuZj :key="i" v-else :obj="item" :fIndex="(i+1)+''"></menuZj>
+    </template>
+  </el-menu>
+  <el-submenu v-else :index="fIndex" :popper-append-to-body="false">
+    <template slot="title">{{obj.name}}</template>
+    <template v-for="(item, i) in obj.children">
+      <el-menu-item :key="i" v-if="item.children.length === 0" :index="fIndex+'-'+(i+1)" @click="menuC(item.url)">{{item.name}}</el-menu-item>
+      <menuZj :key="i" v-else :obj="item" :fIndex="fIndex+'-'+(i+1)"></menuZj>
+    </template>
+  </el-submenu>
+</template>
+
+<script>
+
+export default {
+  name: "menuZj",
+  data() {
+    return {
+    }
+  },
+  props:{
+    menuIndex: String, // 菜单默认选中项
+    menu: Array, // 菜单数据
+    obj: Object, // 菜单对象
+    fIndex: String, // 父元素的index值
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+
+    //初始化
+    init() {
+      
+    },
+    // 菜单点击跳转
+    menuC(url) {
+      this.$router.push({
+        path: url
+      });
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/jsonData/menu.json

@@ -0,0 +1,149 @@
+{
+  "menu": [
+    {
+      "name": "首页",
+      "url": "/",
+      "children": []
+    },
+    {
+      "name": "实时监控",
+      "url": null,
+      "children": [
+        {
+          "name": "状态监视",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "矩阵监视",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "明细矩阵",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "欠发矩阵",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "AGC监视",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "实时分析",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "气象预测",
+          "url": "/a",
+          "children": []
+        }
+      ]
+    },
+    {
+      "name": "性能分析",
+      "url": null,
+      "children": [
+        {
+          "name": "性能分析",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "专题分析",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "指标排行",
+          "url": "/a",
+          "children": []
+        }
+      ]
+    },
+    {
+      "name": "对标管理",
+      "url": "/",
+      "children": []
+    },
+    {
+      "name": "健康管理",
+      "url": null,
+      "children": [
+        {
+          "name": "等级评估",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "故障诊断",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "液压站诊断",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "故障自诊断",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "健康管理",
+          "url": "/a",
+          "children": []
+        }
+      ]
+    },
+    {
+      "name": "智能报警",
+      "url": "/",
+      "children": []
+    },
+    {
+      "name": "安全管控",
+      "url": null,
+      "children": [
+        {
+          "name": "人员矩阵",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "全局监视",
+          "url": "/a",
+          "children": []
+        }
+      ]
+    },
+    {
+      "name": "报表管理",
+      "url": null,
+      "children": [
+        {
+          "name": "统计分析",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "报    表",
+          "url": "/a",
+          "children": []
+        },
+        {
+          "name": "新能源日报",
+          "url": "/a",
+          "children": []
+        }
+      ]
+    }
+  ]
+}

src/main.js

@@ -16,6 +16,34 @@ Vue.prototype.BASE = base;
 // import echartsTool from "@tools/echartsTool"; // Echarts 工具类
 // Vue.prototype.ET = echartsTool;
 
+// 滚动条
+import vuescroll from "vuescroll"; 
+Vue.use(vuescroll, {
+  ops: {
+    scrollPanel: {
+      easing: "easeInOutQuad",
+    },
+    rail: {
+      //轨道设置
+      background: "rgba(255,255,255,0.45)",
+      opacity: 0,
+      size: "9px",
+      specifyBorderRadius: false, // 是否指定轨道的 borderRadius， 如果不那么将会自动设置。
+      gutterOfEnds: "0px", // 轨道距 x 和 y 轴两端的距离。
+      gutterOfSide: "0px",
+      keepShow: false, //是否即使 bar 不存在的情况下也保持显示。
+    },
+    bar: {
+      showDelay: 500, // 在鼠标离开容器后多长时间隐藏滚动条
+      onlyShowBarOnScroll: true, // 是否只在滚动时显示
+      keepShow: true, // 滚动条是否保持显示
+      background: "rgba(0,0,0,0.65)", // 滚动条背景色
+      size: "7px",
+    },
+  }, // 在这里设置全局默认配置
+  name: "VueScroll", // 在这里自定义组件名字，默认是vueScroll
+});
+
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.js

@@ -1,6 +1,16 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// 路由3+版本的异常处理
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+const originalReplace = VueRouter.prototype.replace;
+VueRouter.prototype.replace = function replace(location) {
+  return originalReplace.call(this, location).catch(err => err);
+}
+
 // 公共页面
 import main from '@views/main'
 
@@ -19,6 +29,10 @@ const routes = [
     },
     component: main,
     children:[
+      { // 首页
+        path:'/',
+        component: r => require.ensure([], () => r(require('@views/index/index')), 'indexM')
+      },
       ...yRouter,
       ...lRouter,
       ...zRouter

src/router/ylf.js

@@ -1,6 +1,7 @@
 export default [
   { // 路由页面注释
     path:'/a',
+    name:'a',
     component: r => require.ensure([], () => r(require('@views/module1/a')), 'sysManage2')
   },
 ]

src/views/index/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="home">
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+    首页<br>
+  </div>
+</template>
+
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/main.vue

@@ -1,54 +1,24 @@
 <template>
-  <div class="home">
-    <div>我是logo</div>
+  <div class="page">
+    <div class="top">
+      <div class="logo">我是logo</div>
+      <!-- 住菜单 -->
+      <menuZj :menu="menu" :menuIndex="menuIndex"></menuZj>
+    </div>
 
-    <!-- 一级菜单 -->
-    <el-menu :default-active="activeIndex"
-      background-color="#545c64"
-      text-color="#fff"
-      active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-      <el-menu-item index="1">首页</el-menu-item>
-      <el-submenu index="2">
-        <template slot="title">实时监控</template>
-        <el-menu-item index="2-1">状态监视</el-menu-item>
-        <el-menu-item index="2-2">矩阵监视</el-menu-item>
-        <el-menu-item index="2-3">明细矩阵</el-menu-item>
-        <el-menu-item index="2-4">欠发矩阵</el-menu-item>
-        <el-menu-item index="2-5">明细矩阵</el-menu-item>
-        <el-menu-item index="2-6">AGC监视</el-menu-item>
-        <el-menu-item index="2-7">实时分析</el-menu-item>
-        <el-menu-item index="2-8">气象预测</el-menu-item>
-      </el-submenu>
-      <el-submenu index="3">
-        <template slot="title">性能分析</template>
-        <el-menu-item index="3-1">性能分析</el-menu-item>
-        <el-menu-item index="3-2">专题分析</el-menu-item>
-        <el-menu-item index="3-3">指标排行</el-menu-item>
-      </el-submenu>
-      <el-menu-item index="3">对标管理</el-menu-item>
-      <el-submenu index="4">
-        <template slot="title">健康管理</template>
-        <el-menu-item index="4-1">等级评估</el-menu-item>
-        <el-menu-item index="4-2">故障诊断</el-menu-item>
-        <el-menu-item index="4-3">液压站诊断</el-menu-item>
-        <el-menu-item index="4-4">故障自诊断</el-menu-item>
-        <el-menu-item index="4-5">健康管理</el-menu-item>
-      </el-submenu>
-      <el-menu-item index="5">智能报警</el-menu-item>
-      <el-submenu index="6">
-        <template slot="title">安全管控</template>
-        <el-menu-item index="6-1">人员矩阵</el-menu-item>
-        <el-menu-item index="6-2">全局监视</el-menu-item>
-      </el-submenu>
-      <el-submenu index="7">
-        <template slot="title">报表管理</template>
-        <el-menu-item index="7-1">统计分析</el-menu-item>
-        <el-menu-item index="7-2">报    表</el-menu-item>
-        <el-menu-item index="7-3">新能源日报</el-menu-item>
-      </el-submenu>
-    </el-menu>
-    
-    <router-view/>
+    <!-- 主显示区域 -->
+    <div class="main">
+      <VueScroll>
+        <!--
+          <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
+          当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
+        -->
+        <keep-alive v-if="$route.meta.keepAlive || $route.meta.keepAlive === undefined">
+          <router-view></router-view>
+        </keep-alive>
+        <router-view v-else></router-view>
+      </VueScroll>
+    </div>
   </div>
 </template>
 
@@ -59,5 +29,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @import "@assets/css/a.scss";
+  @import "@assets/css/main.scss";
 </style>

vue.config.js

@@ -24,7 +24,8 @@ module.exports = {
       .set('@components', resolve('src/components'))
       .set('@views', resolve('src/views'))
       .set('@router', resolve('src/router'))
-      .set('@store', resolve('src/store'));
+      .set('@store', resolve('src/store'))
+      .set('@jsonData', resolve('src/jsonData'));
     // 压缩图片
     // if (IS_PROD) {
     //   config.module