首页界面及导航栏更新

@@ -24,7 +24,7 @@ module.exports = {
   },
   },
   dev: {
   dev: {
     env: require('./dev.env'),
     env: require('./dev.env'),
-    port: 12022,
+    port: 12024,
     autoOpenBrowser: true,
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     assetsPublicPath: '/',

+<template>
+    <div style="width: 100%">
+        <Assembly></Assembly>
+
+
+        <el-tabs v-model="activeIndex"
+                 v-if="openTab.length"
+                 type="card"
+                 :closable = "tabCloseable"
+                 @tab-click='tabClick'
+                 @tab-remove="tabRemove"
+                 style="width: 100%;margin-top: 18px;height: 50px">
+            <el-tab-pane
+                    v-for="(item, index) in this.$store.state.openTab"
+                    :key="item.name"
+                    :label="item.name"
+                    :name="item.route">
+            </el-tab-pane>
+            <section class="content-container">
+                <div class="grid-content bg-purple-light">
+                    <el-col :span="24" class="content-wrapper">
+                        <transition name="fade" mode="out-in">
+                            <router-view></router-view>
+                        </transition>
+                    </el-col>
+                </div>
+            </section>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+    import Assembly from "@/views/bus/Assembly";
+
+    export default {
+        name: 'TabMenu',
+        components: { Assembly },
+
+        data() {
+            return {
+                tabCloseable: true
+            }
+        },
+        methods: {
+            initTab(){
+                // 刷新时以当前路由做为tab加入tabs
+                // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
+                // 当当前路由是首页时，添加首页到store，并设置激活状态
+                if (this.$route.path !== '/' && this.$route.path !== '/main') {
+                    // console.log('1');
+                    this.$store.commit('add_tabs', {route: '/main' , name: '首页'});
+                    this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
+                    this.$store.commit('set_active_index', this.$route.path);
+                } else {
+                    // console.log('2');
+                    this.$store.commit('add_tabs', {route: '/main', name: '首页'});
+                    this.$store.commit('set_active_index', '/main');
+                    this.$router.push('/main');
+                }
+            },
+            tabClick(tab){
+                // console.log("tab",tab);
+                // console.log('active',this.$store.state.activeIndex);
+                this.$router.push({path: this.$store.state.activeIndex});
+            },
+            tabRemove(targetName){
+                // console.log("tabRemove",targetName);
+                //首页不删
+                if(targetName == '/main'){
+                    return
+                }
+                this.$store.commit('delete_tabs', targetName);
+                if (this.$store.state.activeIndex === targetName) {
+                    // 设置当前激活的路由
+                    if (this.$store.state.openTab && this.$store.state.openTab.length >=1) {
+                        // console.log('=============',this.$store.state.openTab[this.$store.state.openTab.length-1].route)
+                        this.$store.commit('set_active_index', this.$store.state.openTab[this.$store.state.openTab.length-1].route);
+                        this.$router.push({path: this.$store.state.activeIndex});
+                    } else {
+                        this.$router.push({path: '/main'});
+                    }
+
+
+                }
+            },
+        },
+        mounted() {
+            this.initTab();
+        },
+        watch:{
+            '$route'(to,from){
+                //判断路由是否已经打开
+                //已经打开的 ，将其置为active
+                //未打开的，将其放入队列里
+                let flag = false;
+                for(let item of this.$store.state.openTab){
+                    // console.log("item.name",item.name)
+                    // console.log("t0.name",to.name)
+
+                    if(item.name === to.name){
+                        // console.log('to.path',to.path);
+                        this.$store.commit('set_active_index',to.path)
+                        flag = true;
+                        break;
+                    }
+                }
+
+                if(!flag){
+                    // console.log('to.path',to.path);
+                    this.$store.commit('add_tabs', {route: to.path, name: to.name});
+                    this.$store.commit('set_active_index', to.path);
+                }
+
+            },
+            openTab(){
+                this.openTab.length === 1 ? this.tabCloseable=false :this.tabCloseable = true;
+            }
+        },
+        computed:{
+            openTab:{
+                get: function () {
+                    return this.$store.state.openTab;
+                },
+                set:function (value) {
+                    this.$store.commit('set_tabs', {value});
+                    // console.log("opebTab监视:value = "+ value);
+                }
+
+            },
+            activeIndex:{
+                get:function () {
+                    return this.$store.state.activeIndex;
+                },
+                set:function (value) {
+                    this.$store.commit('set_active_index', value);
+                }
+
+            }
+        }
+    }
+</script>
+
+<style>
+    /*底层背景色*/
+    .el-tabs__nav-scroll{
+        background-color: rgb(239,243,246);
+    }
+    /*首个内部边框*/
+    .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
+        border: 1px solid rgba(80,109,130,.64);
+    }
+    /*其他内部边框*/
+    .el-tabs--card>.el-tabs__header .el-tabs__item{
+        border: 1px solid rgba(80,109,130,.64);
+    }
+    /*外部大边框取消表格样式*/
+    .el-tabs--card>.el-tabs__header .el-tabs__nav{
+        border: 0px;
+    }
+    /*黑框及内字体样式*/
+    .el-tabs__item{
+        color:#495060;
+        height: 26px;
+        border: 1px solid rgba(80,109,130,.64);
+        margin: 4px 3px;
+        line-height: 26px;
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
+    }
+    /*    选中的黑框的样式*/
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+        border-bottom: 1px solid rgba(80,109,130,.64);
+        border-radius: 5px 5px 0 0;
+        background-color: #398af1;
+        color: #fff;
+        border-color: #398af1;
+    }
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
+        content: "";
+        background: #fff;
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+</style>
+

 <template>
 <template>
     <el-row class="container darkmenu" style="margin-top: 0px;">
     <el-row class="container darkmenu" style="margin-top: 0px;">
-        <el-col :span="24" class="header">
+        <el-col :span="24" class="header" style="background-position: center">
             <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
             <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
                 {{collapsed?'':sysName}}
                 {{collapsed?'':sysName}}
             </el-col>
             </el-col>
@@ -69,23 +69,9 @@
 </li>
 </li>
 </ul>
 </ul>
 </aside>
 </aside>
-<section class="content-container">
-    <div class="grid-content bg-purple-light">
-        <el-col :span="24" class="breadcrumb-container">
-            <strong class="title">{{$route.name}}</strong>
-            <el-breadcrumb separator="/" class="breadcrumb-inner">
-                <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
-                    {{ item.name }}
-                </el-breadcrumb-item>
-            </el-breadcrumb>
-        </el-col>
-        <el-col :span="24" class="content-wrapper">
-            <transition name="fade" mode="out-in">
-                <router-view :key="$route.path +$route.query.t"></router-view>
-            </transition>
-        </el-col>
-    </div>
-</section>
+
+<TabMenu></TabMenu>
+
 </el-col>
 </el-col>
 </el-row>
 </el-row>
 </template>
 </template>
@@ -94,6 +80,8 @@
     import rt from '../routes'
     import rt from '../routes'
     import { editPass,resetToken} from '../api/user';
     import { editPass,resetToken} from '../api/user';
     import ElFormItem from "element-ui/packages/form/src/form-item";
     import ElFormItem from "element-ui/packages/form/src/form-item";
+    import TabMenu from "@/components/TabMenu"
+
     export default {
     export default {
 
 
         provide() {
         provide() {
@@ -101,7 +89,7 @@
                 reload: this.reload
                 reload: this.reload
             }
             }
         },
         },
-        components: {ElFormItem},
+        components: {ElFormItem,TabMenu},
         data() {
         data() {
             var validatePass = (rule, value, callback) => {
             var validatePass = (rule, value, callback) => {
                 if (!value) {
                 if (!value) {
@@ -309,9 +297,9 @@
         bottom: 0px;
         bottom: 0px;
         width: 100%;
         width: 100%;
         .header {
         .header {
-            height: 60px;
-            line-height: 60px;
-            background: $color-primary url("/static/images/air-banner.png");
+            height: 70px;
+            line-height: 70px;
+            background: $color-primary url("/static/images/banner.png");
             color:#fff;
             color:#fff;
             .userinfo {
             .userinfo {
                 text-align: right;
                 text-align: right;
@@ -365,7 +353,7 @@
             display: flex;
             display: flex;
             // background: #324057;
             // background: #324057;
             position: absolute;
             position: absolute;
-            top: 60px;
+            top: 70px;
             bottom: 0px;
             bottom: 0px;
             overflow: hidden;
             overflow: hidden;
             aside {
             aside {

+<template>
+    <el-row id="me">
+        <el-col :span="24" id="menu" >
+            <ul>
+                <li><a href="" class="drop">政府监管服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="http://8.131.245.248:9004/">货物监管辅助管理</a></li>
+                            <li><a href="http://8.131.245.248:9005/">卡口辅助管理</a></li>
+                            <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
+                            <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
+                            <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
+                        </ul>
+                    </div></li>
+                <li><a href="" class="drop">综合查询</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="http://8.131.245.248:8083/zz-sso">企业实时查询服务</a></li>
+                            <li><a href="http://8.131.245.248:8083/zz-sso">企业综合查询服务</a></li>
+                            <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>
+                            <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>
+                        </ul>
+                    </div></li>
+                <li> <a href="" class="drop">企业公共服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="http://8.131.245.248:8083/tb-agent/">舱单申报服务</a> </li>
+                            <li><a href="http://8.131.245.248:9001/">奖励申请服务</a> </li>
+                            <li><a href="http://8.131.245.248:8083/zz-bs">卡口服务</a> </li>
+                            <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>
+                            <li><a href="http://8.131.245.248:8002/home">报关服务</a></li>
+                            <li><a href="http://8.131.245.248:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>
+                            <li><a href="http://8.131.245.248:8083/portal/enterpriseService">更多</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li><a href="" class="drop">增值服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="http://8.131.245.248:8083/portal/bookingIndex">在线订舱服务</a></li>
+                            <li><a href="http://8.131.245.248:9003/index/bookList">在线约车服务</a> </li>
+                            <li><a href="http://8.131.245.248:8083/portal/market">物流服务市场</a> </li>
+                            <li><a href="http://8.131.245.248:8083/zz-awb-operate/">航空货运操作管理</a> </li>
+                            <li><a href="http://8.131.245.248:8002/home">智能通关服务</a></li>
+                            <li><a href="http://8.131.245.248:8083/zz-uld/">智慧组板服务</a></li>
+                            <li><a href="http://8.131.245.248:8083/zz-lf/dashboard/index">物流金融服务</a></li>
+                        </ul>
+                    </div>
+                </li>
+
+            </ul>
+        </el-col>
+    </el-row>
+
+</template>
+
+<script>
+    export default {
+        name: "NaBar"
+    }
+</script>
+
+<style scoped>
+    /*去除序列点*/
+    li{
+        list-style-type: none;
+    }
+    a{font-size: 13px;}
+
+    /*菜单栏底层div*/
+    #menu,#menu2 {
+        height: 50px;
+        border-bottom: 3px solid rgb(111,130,148);
+        position:relative;
+        z-index: 999;
+    }
+    /*一级菜单栏样式*/
+    #menu li{
+        float: right;
+        width: 120px;
+        height: 50px;
+        text-align: center;
+        /*position:relative;*/
+        border:none;
+    }
+    /*一级菜单栏字体*/
+    #menu li a {
+        font-size:13px;
+        display:block;
+        /*outline:0;*/
+        /*删除下划线*/
+        text-decoration:none;
+    }
+    /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
+    #menu li:hover .dropdown_1column {
+        right: 2px;
+        left: auto;
+        top:45px;
+        font-size:13px;
+        color:#ffffff;
+    }
+    /*二级菜单栏样式*/
+    .dropdown_1column{
+        position: absolute;
+        left: -999em;
+        background: rgb(14,119,238);
+        display: table;
+        text-align: center;
+    }
+    /*鼠标移至二级菜单栏颜色改变*/
+    #menu li:hover div li:hover{background-color: rgb(18,170,255)}
+    /*二级菜单栏样式*/
+    #menu li ul li {
+        font-size:13px;
+        line-height:45px;
+    }
+
+</style>
+

@@ -12,12 +12,12 @@
                 </el-col>
                 </el-col>
             </el-row>
             </el-row>
             <el-row type="flex" class="row-bg" justify="center">
             <el-row type="flex" class="row-bg" justify="center">
-                <el-col :span="4" >
+                <el-col :span="5" >
                     <el-input placeholder="必填" v-model="flightno">
                     <el-input placeholder="必填" v-model="flightno">
                         <template slot="prepend">航班号</template>
                         <template slot="prepend">航班号</template>
                     </el-input>
                     </el-input>
                 </el-col>
                 </el-col>
-                <el-col :span="4" style="margin-left: 20px">
+                <el-col :span="5" style="margin-left: 20px">
                     <el-date-picker
                     <el-date-picker
                             v-model="flight.flightdate"
                             v-model="flight.flightdate"
                             type="date"
                             type="date"
@@ -25,7 +25,7 @@
                             placeholder="选择日期">
                             placeholder="选择日期">
                     </el-date-picker>
                     </el-date-picker>
                 </el-col>
                 </el-col>
-                <el-col :span="4" style="margin-left: 55px">
+                <el-col :span="5" style="margin-left: 55px">
                     <el-select
                     <el-select
                             :remote-method="remoteMethodAirport"
                             :remote-method="remoteMethodAirport"
                             :loading="listLoading"
                             :loading="listLoading"
@@ -45,7 +45,7 @@
                         </el-option>
                         </el-option>
                     </el-select>
                     </el-select>
                 </el-col>
                 </el-col>
-                <el-col :span="4" style="margin-left: 20px">
+                <el-col :span="5" style="margin-left: 20px">
                     <el-select
                     <el-select
                             :remote-method="remoteMethodAirport"
                             :remote-method="remoteMethodAirport"
                             :loading="listLoading"
                             :loading="listLoading"
@@ -74,7 +74,7 @@
             <el-row>
             <el-row>
                 <el-col :span="4" :offset="10">
                 <el-col :span="4" :offset="10">
                     <div class="grid-content">
                     <div class="grid-content">
-                        <el-button type="primary" @click="nstep">下一步</el-button>
+                        <el-button type="primary" size="medium" style="width: 100px" @click="nstep">下一步</el-button>
                     </div>
                     </div>
                 </el-col>
                 </el-col>
             </el-row>
             </el-row>

@@ -7,11 +7,35 @@ Vue.use(Vuex)
 
 
 // 应用初始状态
 // 应用初始状态
 const state = {
 const state = {
-    count: 10
+    count: 10,
+    openTab:[],//所有打开的路由
+    activeIndex: '/main' //激活状态
 }
 }
 
 
 // 定义所需的 mutations
 // 定义所需的 mutations
 const mutations = {
 const mutations = {
+    // 添加tabs
+    add_tabs (state, data) {
+        this.state.openTab.push(data);
+    },
+    set_tabs(state,value){
+        this.state.openTab= value;
+    },
+    // 删除tabs
+    delete_tabs (state, route) {
+        let index = 0;
+        for (let option of state.openTab) {
+            if (option.route === route) {
+                break;
+            }
+            index++;
+        }
+        this.state.openTab.splice(index, 1);
+    },
+    // 设置当前激活的tab
+    set_active_index (state, index) {
+        this.state.activeIndex = index;
+    },
     INCREMENT(state) {
     INCREMENT(state) {
         state.count++
         state.count++
     },
     },