框架搭建

whyczyk

2021-11-01 18e9b5c5002333dfb636684267a17e4b2578c9e3

框架搭建

 src/App.vue

@@ -1,9 +1,24 @@
<template>
  <div id="app">
    <router-view></router-view>
  </div>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.$router.push({
            path: '/',
        }).catch(err => {
            console.log(err)
        });
    }
}
</script>
<style>
  @import "./assets/css/reset.css";
@import "./assets/css/reset.css";
</style>

 src/assets/img/logo.png

 src/assets/img/user-ico.png

 src/layout/components/PageMenu.vue

New file
@@ -0,0 +1,144 @@
<template>
    <div class="myMenu">
        <el-menu :default-active="id" class="el-menu-vertical-demo">
            <el-submenu @click="select(oneMenu)" :index="oneMenu.id" v-for="(oneMenu,i) in menus" :key="i">
                <template slot="title">
                    <i v-if="oneMenu.icon" :class="oneMenu.icon" class="ico"></i>
                    <span>{{ oneMenu.name }}</span>
                </template>
                <el-menu-item-group v-if="oneMenu.subMenus">
                    <el-menu-item @click="select(twoMenu,oneMenu)" :index="twoMenu.id" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">{{ twoMenu.name }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            acTabs: 'workList',
            menus: [{
                id: '1',
                name: '告警工单',
                url: 'alarmWork',
                icon: 'el-icon-s-order',
                subMenus: [
                    {
                        id: '1-1',
                        url: 'addWork',
                        name: '新建工单',
                    }, {
                        id: '1-2',
                        url: 'workList',
                        name: '待处理',
                    },
                ]
            },],
            id: '1-2'
        }
    },
    methods: {
        select(data, parent) {
            this.id = data.id;
            if (data.url) {
                this.$router.push({
                    path: `/${parent.url}/${data.url}`,
                }).catch(err => {
                    console.log(err)
                });
            }
        },
    },
    mounted() {
    },
}
</script>

<style scoped>
.myMenu {
    width: 100%;
}

.myMenu .el-submenu,
.myMenu /deep/ .el-submenu {
    margin-bottom: 20px;
}

.myMenu .el-menu,
.myMenu /deep/ .el-menu {
    background: transparent;
    border-right: none;
}

.myMenu .el-submenu__title,
.myMenu /deep/ .el-submenu__title,
.myMenu .el-submenu__title i,
.myMenu /deep/ .el-submenu__title i {
    color: #ffffff;
}

.myMenu .el-submenu .el-submenu__title,
.myMenu /deep/ .el-submenu .el-submenu__title {
    font-size: 24px;
}

.myMenu .el-submenu .el-submenu__title .ico,
.myMenu /deep/ .el-submenu .el-submenu__title .ico {
    width: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 50%;
    color: #2b2a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    font-size: 18px;
}

.myMenu .el-submenu__icon-arrow,
.myMenu /deep/ .el-submenu__icon-arrow {
    font-size: 18px;
}

.myMenu .el-submenu .el-submenu__title,
.myMenu /deep/ .el-submenu .el-submenu__title {
    display: flex;
    align-items: center;
}

.myMenu .el-submenu.is-opened .el-submenu__title,
.myMenu /deep/ .el-submenu.is-opened .el-submenu__title {
    border-bottom-color: transparent;
    background: #2b2a3a;
}

.myMenu .el-submenu__title:hover,
.myMenu /deep/ .el-submenu__title:hover {
    background: transparent;
}

.myMenu .el-submenu .el-menu-item,
.myMenu /deep/ .el-submenu .el-menu-item {
    height: 36px;
    line-height: 36px;
    color: #ababab;
    margin: 9px 0;
}

.myMenu .el-submenu .el-menu-item:focus,
.myMenu /deep/ .el-submenu .el-menu-item:focus,
.myMenu .el-submenu .el-menu-item:hover,
.myMenu /deep/ .el-submenu .el-menu-item:hover {
    background-color: transparent;
    color: #ffffff;
}

.myMenu .el-submenu .el-menu-item.is-active,
.myMenu /deep/ .el-submenu .el-menu-item.is-active {
    background: #3e81ea;
    color: #ffffff;
}
</style>

 src/layout/components/breadcrumb.vue

New file
@@ -0,0 +1,35 @@
<template>
    <el-breadcrumb class="app-breadcrumb" separator="＞">
        <el-breadcrumb-item v-for="(item,index) in levelList" :key="index">
            {{ item.meta.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
export default {
    data() {
        return {
            levelList: null
        }
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    },
    created() {
        this.getBreadcrumb()
    },
    methods: {
        getBreadcrumb() {
            let matched = this.$route.matched.filter(item => item.meta && item.meta.title)

            this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
        },
    }
}
</script>

<style scoped>
</style>

 src/layout/components/pageHeader.vue

New file
@@ -0,0 +1,58 @@
<template>
    <div class="pageHeader">
        <img src="@/assets/img/logo.png" class="logoImg">
        <div class="headToolsCon">
            <img src="@/assets/img/user-ico.png" class="userIco">
            <span class="text">退出</span>
            <i class="el-icon-arrow-down el-icon--right ico"></i>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style scoped>
.pageHeader {
    width: 100%;
    height: 88px;
    background-color: #2368c3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px 0 32px;
}
.logoImg {
    width: 232px;
    height: 61px;
}

.headToolsCon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.headToolsCon .userIco {
    width: 46px;
    height: 46px;
}

.headToolsCon .text {
    font-size: 18px;
    color: #ffffff;
    margin: 0 70px 0 10px;
}

.headToolsCon .ico {
    color: #ffffff;
    font-size: 18px;
}
</style>

 src/layout/index.vue

New file
@@ -0,0 +1,106 @@
<template>
    <div class="pageWarp">
        <!-- 头部 -->
        <page-header></page-header>
        <!-- 面包屑导航 -->
        <div class="pageBreadcrumb">
            <breadcrumb></breadcrumb>
        </div>
        <!-- 内容区域 -->
        <div class="pageContent">
            <!-- 左侧菜单 -->
            <div class="slideBarCon">
                <page-menu></page-menu>
            </div>
            <!-- 右侧界面 -->
            <div class="viewCon">
                <!--这里的router-view用来渲染子页面-->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import PageMenu from './components/PageMenu.vue'
import Breadcrumb from './components/breadcrumb.vue'
import PageHeader from './components/pageHeader.vue'
export default {
    components: { PageMenu, Breadcrumb, PageHeader },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style scoped>
.pageWarp {
    width: 100%;
    height: 100%;
}

.pageBreadcrumb {
    background: #044096;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}

.pageBreadcrumb .el-breadcrumb__inner,
.pageBreadcrumb /deep/ .el-breadcrumb__inner {
    font-size: 17px;
    color: #ffffff;
    padding: 0 22px;
}
.pageBreadcrumb .el-breadcrumb__separator,
.pageBreadcrumb /deep/ .el-breadcrumb__separator {
    color: #ffffff;
    font-size: 17px;
    margin: 0;
}

.pageBreadcrumb /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.pageBreadcrumb /deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.pageBreadcrumb
    /deep/
    .el-breadcrumb__item:last-child
    .el-breadcrumb__inner
    a:hover,
.pageBreadcrumb
    /deep/
    .el-breadcrumb__item:last-child
    .el-breadcrumb__inner:hover,
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.pageBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    font-size: 17px;
    color: #ffffff;
    padding: 0 22px;
}

.pageContent {
    width: 100%;
    height: calc(100% - 128px);
    display: flex;
}

.pageContent .slideBarCon {
    width: 280px;
    height: 100%;
    background: #343345;
    padding: 20px 0;
}

.pageContent .viewCon {
    width: calc(100% - 280px);
    height: 100%;
    background-color: #e8e8e8;
}
</style>

 src/pages/alarmWork/addWork.vue

New file
@@ -0,0 +1,18 @@
<template>
    <div class="">
        新建工单
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style scoped>
</style>

 src/pages/alarmWork/index.vue

New file
@@ -0,0 +1,16 @@
<template>
    <router-view></router-view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style scoped>
</style>

 src/pages/alarmWork/list.vue

New file
@@ -0,0 +1,18 @@
<template>
    <div class="">
        工单列表
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style scoped>
</style>

 src/pages/index.vue

File was deleted

 src/router/routes.js

@@ -1,8 +1,34 @@
/* Layout */
import Layout from '@/layout'
export default [{
    path: '/',
    redirect: '/index'
}, {
    path: '/index',
    meta: {},
    component: (resolve) => require(['@/pages/index.vue'], resolve)
    redirect: '/alarmWork',
    component: Layout,
    children: [
        {
            path: 'alarmWork',
            meta: {
                title: '告警工单',
            },
            component: (resolve) => require(['@/pages/alarmWork/index.vue'], resolve),
            redirect: '/alarmWork/workList',
            children: [
                {
                    path: 'addWork',
                    name: 'addWork',
                    meta: {
                        title: '新建工单',
                    },
                    component: (resolve) => require(['@/pages/alarmWork/addWork.vue'], resolve),
                }, {
                    path: 'workList',
                    name: 'workList',
                    meta: {
                        title: '工单列表',
                    },
                    component: (resolve) => require(['@/pages/alarmWork/list.vue'], resolve),
                },
            ]
        }
    ]
}];