client.git - Gitblit

parent: 605c003b | 补丁 | 提交 | ignore whitespace

whychdw

2019-07-22 a46a418cc31ae54f4c84c3c0cd8b87f6bc02f2a4

提交内容

15个文件已添加

	.gitignore	21 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	babel.config.js	5 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	11686 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	50 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/favicon.ico	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/index.html	17 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/App.vue	75 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/logo.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/HelloWorld.vue	58 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/MainMenu.vue	337 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/libs/common.css	66 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/libs/util.js	9 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main.js	38 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/router.js	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	vue.config.js	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 .gitignore

New file
@@ -0,0 +1,21 @@
.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?

 babel.config.js

New file
@@ -0,0 +1,5 @@
module.exports = {
  presets: [
    '@vue/app'
  ]
}

 package-lock.json

New file
Diff too large

 package.json

New file
@@ -0,0 +1,50 @@
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "iview": "^3.4.2",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",
    "vue-router": "^3.0.7",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

 public/favicon.ico


 public/index.html

New file
@@ -0,0 +1,17 @@
<!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>client</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 src/App.vue

New file
@@ -0,0 +1,75 @@
<template>
  <div id="app">
    <div class="layout">
        <Layout>
            <Header class="page-header">
                <div class="app-logo">板卡自动测试系统</div>
                <div class="app-tools">
                  <ul>
                    <li><a class="active">管理员</a></li>
                    <li><a>退出系统</a></li>
                  </ul>
                </div>
            </Header>
            <Content class="page-content">
              <main-menu></main-menu>
              <div class="page-main-menu">456</div>
            </Content>
        </Layout>
    </div>
  </div>
</template>

<script>
import MainMenu from './components/MainMenu';
export default {
  components:{
    MainMenu
  },
  name: 'app'
}
</script>
<style scoped>
  .ivu-layout-header.page-header {
    position: relative;
    height: 60px;
    background: #EDEDED;
    box-shadow: 0 2px 6px rgba(0,0,0,.2)
  }
  .page-header .app-logo {
    position: absolute;
    color: #2F89C9;
    font-size: 18px;
  }
  .page-header .app-tools {
    float: right;
  }
  .app-tools ul li{
    float:left;
    list-style: none;
  }
  .app-tools ul li a {
    display: block;
    height: 60px;
    padding: 0 12px;
    font-size: 18px;
    line-height: 60px;
  }
  .app-tools ul li a.active {
    background-color: #0070C0;
    color: #FFFFFF;
  }
  .app-tools ul li a:active {
    background-color: #0070C0;
    color: #FFFFFF;
  }
  .ivu-layout-content.page-content {
    margin-top: 2px;
    height: calc(100vh - 63px);
    background: -webkit-linear-gradient(#FFFFFF, #BCCDEA); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#FFFFFF, #BCCDEA); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#FFFFFF, #BCCDEA); /* Firefox 3.6 - 15 */
    background: linear-gradient(#FFFFFF, #BCCDEA); /* 标准的语法 */
  }
  
</style>

 src/assets/logo.png


 src/components/HelloWorld.vue

New file
@@ -0,0 +1,58 @@
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </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>
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/MainMenu.vue

New file
@@ -0,0 +1,337 @@
<template>
    <div class="page-main-menu" @mouseleave="leaveCont">
        <div class="main-menu">
            <ul>
                <li 
                    v-for="(menu, key) in menus" 
                    :key="menu.txt" 
                    @mouseenter="mainMenuEnter(key)">
                        <a href="#" :class="{active: menu.active, 'active-hover': menu.hover}">{{menu.txt}}</a>
                </li>
            </ul>
        </div>
        <div class="sub-menu" :class="{'sub-menu-hover': subHover}">
            <div class="sub-menu-item" 
                v-for="(menu, key) in menus" 
                :key="key"
                :class="{'show-this':menu.subShow, 'show-this-hover':menu.subShowHover}">
                <ul>
                    <li v-for="(children, sKey) in menu.childrens" :key="sKey">
                        <a 
                            :href="children.url" 
                            :class="{active: children.active}"
                            @click="subClick(key, sKey)">
                            {{children.txt}}
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import $ from 'jquery';
import { setTimeout } from 'timers';
export default {
    data() {
        return {
            mainHover: false,
            subHover: false,
            menus:[
                {
                    txt: '首页',
                    url: '#',
                    active: true,   // 主导航是否激活
                    hover: false,   // 鼠标是否在主导航
                    subShow: true,  // 是否显示子导航
                    subShowHover:false, // 是否显示对应的子导航
                    childrens: [
                        {
                            txt: '状态信息',
                            url: '#',
                            active: true
                        },
                        {
                            txt: '账户信息',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '修改密码',
                            url: '#',
                            active: false
                        }
                    ]
                },
                {
                    txt: '实时监控',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '过程监控',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '通道选择',
                            url: '#',
                            active: false
                        },
                        {
                           txt: '信息显示',
                            url: '#',
                            active: false 
                        }
                    ] 
                },
                {
                    txt: '检测试验',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '故障诊断',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '烤机试验',
                            url: '#',
                            active: false
                        }
                    ] 
                },
                {
                    txt: '数据分析',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '故障分析',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '烤机分析',
                            url: '#',
                            active: false
                        },
                        {
                           txt: '统计分析',
                            url: '#',
                            active: false 
                        }
                    ] 
                },
                {
                    txt: '报表管理',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '报表生成',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '报表下载',
                            url: '#',
                            active: false
                        }
                    ] 
                },
                {
                    txt: '信息管理',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '板卡管理',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '测例管理',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '资料管理',
                            url: '#',
                            active: false
                        }
                    ] 
                },
                {
                    txt: '系统管理',
                    url: '#',
                    active: false,
                    hover: false,
                    subShow: false,
                    subShowHover: false,
                    childrens: [
                        {
                            txt: '用户管理',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '日志管理',
                            url: '#',
                            active: false
                        },
                        {
                            txt: '参数配置',
                            url: '#',
                            active: false
                        }
                    ] 
                },
            ]
        }
    },
    methods: {
        init: function() {
            // 遍历menu的值
            for(var i=0; i<this.menus.length; i++) {
                var menu = this.menus[i];
                menu.hover = false;
                menu.subShowHover= false;
                var childrens = menu.childrens;
                for(var k=0; k<childrens.length; k++){
                    var children = childrens[k];
                    children.hover = false;
                }
            }
        },
        initActive: function() {
            // 遍历menu的值
            for(var i=0; i<this.menus.length; i++) {
                var menu = this.menus[i];
                menu.active = false;
                menu.subShow = false;
                var childrens = menu.childrens;
                for(var k=0; k<childrens.length; k++){
                    var children = childrens[k];
                    children.active = false;
                }
            }
        },
        leaveCont: function() {
            this.mainHover = false;     // 容器
            this.subHover = false;      // 子导航
            this.init();
        },
        mainMenuEnter: function(index) {
            this.init();
            this.menus[index].hover = true;
            this.menus[index].subShowHover=true;
            this.subHover = true;      // 子导航
        },
        subClick: function(key, skey) {
            this.initActive();
            var menu = this.menus[key];
            var children = menu.childrens[skey];
            menu.subShow = true;
            menu.active = true;
            children.active = true;
        }
    }
}
</script>
<style scoped>
    .main-menu {
        text-align: left;
        min-width: 1300px;
    }
    .main-menu ul {
        margin-left: 90px;
    }
    .main-menu li {
        display: inline-block;
    }
    .main-menu {
        padding-top: 8px;
    }
    .main-menu li a {
        display: block;
        text-align: center;
        font-size: 18px;
        min-width: 140px;
        margin-right: 20px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding: 8px 20px;
    }
    .main-menu li a.active, .main-menu li a.active-hover{
        background-color: #0070C0;
        color: #FFFFFF;
    }
    .sub-menu {
        padding: 12px 0;
        background-color: #0070C0;
    }
    .sub-menu-item {
        display: none;
    }
    .sub-menu-hover .sub-menu-item.show-this{
        display: none;
    }
    .sub-menu.sub-menu-hover .sub-menu-item.show-this-hover {
        display: block;
    }
    .sub-menu-item.show-this{
        display: block;
    }
    .sub-menu-item ul {
        margin-left: 80px;
    }
    .sub-menu-item li {
        display: inline-flex;
    }
    .sub-menu-item li::before{
        content: '|';
        color: #FFFFFF;
        font-size: 20px;
        line-height: 32px;
    }
    .sub-menu-item li:first-child::before{
        content: '|';
        color: #0070C0;
        font-size: 18px;
        line-height: 32px;
    }
    .sub-menu-item li a {
        display: block;
        margin: 0 24px;
        font-size: 16px;
        padding: 4px 20px;
        color: #FFFFFF;
    }
    .sub-menu-item li a.active {
        border-radius: 16px;
        background-color: #FFFFFF;
        color: #2F89C9;
    }
    .sub-menu-item li a:hover {
        border-radius: 16px;
        background-color: #FFFFFF;
        color: #2F89C9;
    }
</style>

 src/libs/common.css

New file
@@ -0,0 +1,66 @@
.page-container {
    position: relative;
    height: 100%;
    overflow-y: auto;
}
.page-container.page-container-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-container .graph{
    height: 100%;
}

/* height */
.h500 {
    height: 500px;
}
.h600 {
    height: 600px;
}
/* bg-color */
.bg-white {
    background-color: #FFFFFF;
}
.bg-primary {
    background-color: #2d8cf0
}
.bg-info {
    background-color: #2db7f5;
}
.bg-success {
    background-color: #19be6b;
}
.bg-error {
    background-color: #ed4014;
}
/* margin */
.mrt8 {
    margin-top: 8px;
}
.mrr8 {
    margin-right: 8px;
}
/* table cell bg */

.ivu-table .bg-error {
    background-color: #ed4014;
    color: #FFFFFF;
}

/*滚动条整体样式*/
::-webkit-scrollbar{
    width: 10px;/*竖向滚动条的宽度*/
    height: 10px;/*横向滚动条的高度*/
}
::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/
    background: #666666;
    border-radius: 5px;
}
::-webkit-scrollbar-track{/*滚动条轨道的样式*/
    background: #ccc;
    border-radius: 5px;
}

 src/libs/util.js

New file
@@ -0,0 +1,9 @@
let util = {

};
util.title = function (title) {
    title = title ? title : '板卡自动测试系统';
    window.document.title = title;
};

export default util;

 src/main.js

New file
@@ -0,0 +1,38 @@
import Vue from 'vue';
import iView from 'iview';
import VueRouter from 'vue-router';
import Routers from './router';
import Util from './libs/util';
import App from './App.vue';
import 'iview/dist/styles/iview.css';
import './libs/common.css';

Vue.use(VueRouter);
Vue.use(iView);
// 添加中央事件总线
Vue.prototype.$bus = new Vue();
// 路由配置
const RouterConfig = {
    mode: 'hash',
    routes: Routers
};
const router = new VueRouter(RouterConfig);

router.beforeEach((to, from, next) => {
    iView.LoadingBar.start();
    // console.log(to.meta);
    Util.title(to.meta.title);
    next();
    
});

router.afterEach((to, from, next) => {
    iView.LoadingBar.finish();
    window.scrollTo(0, 0);
});

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

 src/router.js

New file
@@ -0,0 +1,2 @@
const routers = [];
export default routers;

 vue.config.js

New file
@@ -0,0 +1,4 @@
var path = require('path');
module.exports = {
    publicPath: './'
}

New file
			@@ -0,0 +1,21 @@
			.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?

New file
			@@ -0,0 +1,5 @@
			module.exports = {
			presets: [
			'@vue/app'
			]
			}

New file
			@@ -0,0 +1,50 @@
			{
			"name": "client",
			"version": "0.1.0",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint"
			},
			"dependencies": {
			"core-js": "^2.6.5",
			"iview": "^3.4.2",
			"jquery": "^3.4.1",
			"vue": "^2.6.10",
			"vue-router": "^3.0.7",
			"vuex": "^3.1.1"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^3.9.0",
			"@vue/cli-plugin-eslint": "^3.9.0",
			"@vue/cli-service": "^3.9.0",
			"babel-eslint": "^10.0.1",
			"eslint": "^5.16.0",
			"eslint-plugin-vue": "^5.0.0",
			"vue-template-compiler": "^2.6.10"
			},
			"eslintConfig": {
			"root": true,
			"env": {
			"node": true
			},
			"extends": [
			"plugin:vue/essential",
			"eslint:recommended"
			],
			"rules": {},
			"parserOptions": {
			"parser": "babel-eslint"
			}
			},
			"postcss": {
			"plugins": {
			"autoprefixer": {}
			}
			},
			"browserslist": [
			"> 1%",
			"last 2 versions"
			]
			}

New file
			@@ -0,0 +1,17 @@
			<!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>client</title>
			</head>
			<body>
			<noscript>
			<strong>We're sorry but client 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>

New file
			@@ -0,0 +1,75 @@
			<template>
			<div id="app">
			<div class="layout">
			<Layout>
			<Header class="page-header">
			<div class="app-logo">板卡自动测试系统</div>
			<div class="app-tools">
			<ul>
			<li><a class="active">管理员</a></li>
			<li><a>退出系统</a></li>
			</ul>
			</div>
			</Header>
			<Content class="page-content">
			<main-menu></main-menu>
			<div class="page-main-menu">456</div>
			</Content>
			</Layout>
			</div>
			</div>
			</template>

			<script>
			import MainMenu from './components/MainMenu';
			export default {
			components:{
			MainMenu
			},
			name: 'app'
			}
			</script>
			<style scoped>
			.ivu-layout-header.page-header {
			position: relative;
			height: 60px;
			background: #EDEDED;
			box-shadow: 0 2px 6px rgba(0,0,0,.2)
			}
			.page-header .app-logo {
			position: absolute;
			color: #2F89C9;
			font-size: 18px;
			}
			.page-header .app-tools {
			float: right;
			}
			.app-tools ul li{
			float:left;
			list-style: none;
			}
			.app-tools ul li a {
			display: block;
			height: 60px;
			padding: 0 12px;
			font-size: 18px;
			line-height: 60px;
			}
			.app-tools ul li a.active {
			background-color: #0070C0;
			color: #FFFFFF;
			}
			.app-tools ul li a:active {
			background-color: #0070C0;
			color: #FFFFFF;
			}
			.ivu-layout-content.page-content {
			margin-top: 2px;
			height: calc(100vh - 63px);
			background: -webkit-linear-gradient(#FFFFFF, #BCCDEA); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(#FFFFFF, #BCCDEA); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(#FFFFFF, #BCCDEA); /* Firefox 3.6 - 15 */
			background: linear-gradient(#FFFFFF, #BCCDEA); /* 标准的语法 */
			}

			</style>

New file
			@@ -0,0 +1,58 @@
			<template>
			<div class="hello">
			<h1>{{ msg }}</h1>
			<p>
			For a guide and recipes on how to configure / customize this project,<br>
			check out the
			<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
			</p>
			<h3>Installed CLI Plugins</h3>
			<ul>
			<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
			<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
			</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>
			h3 {
			margin: 40px 0 0;
			}
			ul {
			list-style-type: none;
			padding: 0;
			}
			li {
			display: inline-block;
			margin: 0 10px;
			}
			a {
			color: #42b983;
			}
			</style>

New file
			@@ -0,0 +1,337 @@
			<template>
			<div class="page-main-menu" @mouseleave="leaveCont">
			<div class="main-menu">
			<ul>
			<li
			v-for="(menu, key) in menus"
			:key="menu.txt"
			@mouseenter="mainMenuEnter(key)">
			<a href="#" :class="{active: menu.active, 'active-hover': menu.hover}">{{menu.txt}}</a>
			</li>
			</ul>
			</div>
			<div class="sub-menu" :class="{'sub-menu-hover': subHover}">
			<div class="sub-menu-item"
			v-for="(menu, key) in menus"
			:key="key"
			:class="{'show-this':menu.subShow, 'show-this-hover':menu.subShowHover}">
			<ul>
			<li v-for="(children, sKey) in menu.childrens" :key="sKey">
			<a
			:href="children.url"
			:class="{active: children.active}"
			@click="subClick(key, sKey)">
			{{children.txt}}
			</a>
			</li>
			</ul>
			</div>
			</div>
			</div>
			</template>
			<script>
			import $ from 'jquery';
			import { setTimeout } from 'timers';
			export default {
			data() {
			return {
			mainHover: false,
			subHover: false,
			menus:[
			{
			txt: '首页',
			url: '#',
			active: true, // 主导航是否激活
			hover: false, // 鼠标是否在主导航
			subShow: true, // 是否显示子导航
			subShowHover:false, // 是否显示对应的子导航
			childrens: [
			{
			txt: '状态信息',
			url: '#',
			active: true
			},
			{
			txt: '账户信息',
			url: '#',
			active: false
			},
			{
			txt: '修改密码',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '实时监控',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '过程监控',
			url: '#',
			active: false
			},
			{
			txt: '通道选择',
			url: '#',
			active: false
			},
			{
			txt: '信息显示',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '检测试验',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '故障诊断',
			url: '#',
			active: false
			},
			{
			txt: '烤机试验',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '数据分析',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '故障分析',
			url: '#',
			active: false
			},
			{
			txt: '烤机分析',
			url: '#',
			active: false
			},
			{
			txt: '统计分析',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '报表管理',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '报表生成',
			url: '#',
			active: false
			},
			{
			txt: '报表下载',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '信息管理',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '板卡管理',
			url: '#',
			active: false
			},
			{
			txt: '测例管理',
			url: '#',
			active: false
			},
			{
			txt: '资料管理',
			url: '#',
			active: false
			}
			]
			},
			{
			txt: '系统管理',
			url: '#',
			active: false,
			hover: false,
			subShow: false,
			subShowHover: false,
			childrens: [
			{
			txt: '用户管理',
			url: '#',
			active: false
			},
			{
			txt: '日志管理',
			url: '#',
			active: false
			},
			{
			txt: '参数配置',
			url: '#',
			active: false
			}
			]
			},
			]
			}
			},
			methods: {
			init: function() {
			// 遍历menu的值
			for(var i=0; i<this.menus.length; i++) {
			var menu = this.menus[i];
			menu.hover = false;
			menu.subShowHover= false;
			var childrens = menu.childrens;
			for(var k=0; k<childrens.length; k++){
			var children = childrens[k];
			children.hover = false;
			}
			}
			},
			initActive: function() {
			// 遍历menu的值
			for(var i=0; i<this.menus.length; i++) {
			var menu = this.menus[i];
			menu.active = false;
			menu.subShow = false;
			var childrens = menu.childrens;
			for(var k=0; k<childrens.length; k++){
			var children = childrens[k];
			children.active = false;
			}
			}
			},
			leaveCont: function() {
			this.mainHover = false; // 容器
			this.subHover = false; // 子导航
			this.init();
			},
			mainMenuEnter: function(index) {
			this.init();
			this.menus[index].hover = true;
			this.menus[index].subShowHover=true;
			this.subHover = true; // 子导航
			},
			subClick: function(key, skey) {
			this.initActive();
			var menu = this.menus[key];
			var children = menu.childrens[skey];
			menu.subShow = true;
			menu.active = true;
			children.active = true;
			}
			}
			}
			</script>
			<style scoped>
			.main-menu {
			text-align: left;
			min-width: 1300px;
			}
			.main-menu ul {
			margin-left: 90px;
			}
			.main-menu li {
			display: inline-block;
			}
			.main-menu {
			padding-top: 8px;
			}
			.main-menu li a {
			display: block;
			text-align: center;
			font-size: 18px;
			min-width: 140px;
			margin-right: 20px;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 8px 20px;
			}
			.main-menu li a.active, .main-menu li a.active-hover{
			background-color: #0070C0;
			color: #FFFFFF;
			}
			.sub-menu {
			padding: 12px 0;
			background-color: #0070C0;
			}
			.sub-menu-item {
			display: none;
			}
			.sub-menu-hover .sub-menu-item.show-this{
			display: none;
			}
			.sub-menu.sub-menu-hover .sub-menu-item.show-this-hover {
			display: block;
			}
			.sub-menu-item.show-this{
			display: block;
			}
			.sub-menu-item ul {
			margin-left: 80px;
			}
			.sub-menu-item li {
			display: inline-flex;
			}
			.sub-menu-item li::before{
			content: '\|';
			color: #FFFFFF;
			font-size: 20px;
			line-height: 32px;
			}
			.sub-menu-item li:first-child::before{
			content: '\|';
			color: #0070C0;
			font-size: 18px;
			line-height: 32px;
			}
			.sub-menu-item li a {
			display: block;
			margin: 0 24px;
			font-size: 16px;
			padding: 4px 20px;
			color: #FFFFFF;
			}
			.sub-menu-item li a.active {
			border-radius: 16px;
			background-color: #FFFFFF;
			color: #2F89C9;
			}
			.sub-menu-item li a:hover {
			border-radius: 16px;
			background-color: #FFFFFF;
			color: #2F89C9;
			}
			</style>

New file
			@@ -0,0 +1,66 @@
			.page-container {
			position: relative;
			height: 100%;
			overflow-y: auto;
			}
			.page-container.page-container-fixed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}
			.page-container .graph{
			height: 100%;
			}

			/* height */
			.h500 {
			height: 500px;
			}
			.h600 {
			height: 600px;
			}
			/* bg-color */
			.bg-white {
			background-color: #FFFFFF;
			}
			.bg-primary {
			background-color: #2d8cf0
			}
			.bg-info {
			background-color: #2db7f5;
			}
			.bg-success {
			background-color: #19be6b;
			}
			.bg-error {
			background-color: #ed4014;
			}
			/* margin */
			.mrt8 {
			margin-top: 8px;
			}
			.mrr8 {
			margin-right: 8px;
			}
			/* table cell bg */

			.ivu-table .bg-error {
			background-color: #ed4014;
			color: #FFFFFF;
			}

			/滚动条整体样式/
			::-webkit-scrollbar{
			width: 10px;/竖向滚动条的宽度/
			height: 10px;/横向滚动条的高度/
			}
			::-webkit-scrollbar-thumb{/滚动条里面的小方块/
			background: #666666;
			border-radius: 5px;
			}
			::-webkit-scrollbar-track{/滚动条轨道的样式/
			background: #ccc;
			border-radius: 5px;
			}

New file
			@@ -0,0 +1,9 @@
			let util = {

			};
			util.title = function (title) {
			title = title ? title : '板卡自动测试系统';
			window.document.title = title;
			};

			export default util;

New file
			@@ -0,0 +1,38 @@
			import Vue from 'vue';
			import iView from 'iview';
			import VueRouter from 'vue-router';
			import Routers from './router';
			import Util from './libs/util';
			import App from './App.vue';
			import 'iview/dist/styles/iview.css';
			import './libs/common.css';

			Vue.use(VueRouter);
			Vue.use(iView);
			// 添加中央事件总线
			Vue.prototype.$bus = new Vue();
			// 路由配置
			const RouterConfig = {
			mode: 'hash',
			routes: Routers
			};
			const router = new VueRouter(RouterConfig);

			router.beforeEach((to, from, next) => {
			iView.LoadingBar.start();
			// console.log(to.meta);
			Util.title(to.meta.title);
			next();

			});

			router.afterEach((to, from, next) => {
			iView.LoadingBar.finish();
			window.scrollTo(0, 0);
			});

			new Vue({
			el: '#app',
			router: router,
			render: h => h(App)
			});

New file
			@@ -0,0 +1,2 @@
			const routers = [];
			export default routers;

New file
			@@ -0,0 +1,4 @@
			var path = require('path');
			module.exports = {
			publicPath: './'
			}