路由更改

shuishen

2022-09-16 c0564d349d9af78bd661bf6fd9b3c18296ab9df6

路由更改

 src/router/page/index.js

@@ -10,8 +10,10 @@
Vue.use(VueRouter)

const lyout = () => import('../../views/lyout/index.vue')
const area = () => import('../../views/area/index.vue')
const home = () => import('../../views/home/index.vue')
const house = () => import('../../views/house/index.vue')
const police = () => import('../../views/police/index.vue')
const video = () => import('../../views/video/index.vue')
const activity = () => import('../../views/activity/index.vue')

const routes = [
@@ -21,30 +23,44 @@
    },
    {
        path: '/lyout',
        redirect: '/lyout/area',
        redirect: '/lyout/home',
        meta: {
            title: '导航菜单'
        },
        component: lyout,
        children: [
            {
                path: 'area',
                path: 'home',
                meta: {
                    title: '辖区'
                    title: '首页'
                },
                component: area
                component: home
            },
            {
                path: 'house',
                meta: {
                    title: '小区'
                    title: '社区感知'
                },
                component: house
            },
            {
                path: 'police',
                meta: {
                    title: '警力资源'
                },
                component: police
            },
            {
                path: 'video',
                meta: {
                    title: '视频监控'
                },
                component: video
            },
            {
                path: 'activity',
                meta: {
                    title: '活动'
                    title: '安保活动'
                },
                component: activity
            }

 src/views/home/index.vue

New file
@@ -0,0 +1,142 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-15 16:00:35
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="container">
        <div class="search-box"></div>
        <div class="result-content">
            <div class="housing-estate-info">
                <div class="housing-bg"></div>
                <div class="housing-introduce">
                    <div>
                        <div class="l">分类属性：</div>
                        <div class="r">住宅小区</div>
                    </div>
                    <div>
                        <div class="l">所属辖区：</div>
                        <div class="r">xxxxxxx警务室</div>
                    </div>
                    <div>
                        <div class="l">责任民警：</div>
                        <div class="r">---------</div>
                    </div>
                    <div>
                        <div class="l">标准地址：</div>
                        <div class="r">江苏省苏州市吴江区江林街道五星路xxxxxxxxxxxxxxxxx</div>
                    </div>
                </div>
            </div>

            <div class="nav-tab">
                <div class="nav" @click="navClick" data-type="0">基本信息</div>
                <div class="nav" @click="navClick" data-type="1">警务信息</div>
                <div class="nav" @click="navClick" data-type="2">预警信息</div>
            </div>

            <div class="base-info" v-show="navType == 0">
                <div class="sub-nav-list">
                    <div class="sub-nav">楼栋</div>
                    <div class="sub-nav">出入口</div>
                    <div class="sub-nav">停车场</div>
                    <div class="sub-nav">商业</div>
                </div>

                <div class="floor-content">
                    <div class="ridgepole-list"></div>
                    <div class="ridgepole-info"></div>
                    <div class="people-info"></div>
                    <div class="house-info"></div>
                </div>
                <div class="come-out-content"></div>
                <div class="park-content"></div>
                <div class="business-content"></div>
            </div>

            <div class="police-info" v-show="navType == 1"></div>

            <div class="warning-info" v-show="navType == 2"></div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            navType: 0
        }
    },
    created () {

    },
    mounted () {

    },
    updated () {

    },
    methods: {
        navClick (e) {
            this.navType = e.target.dataset.type
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 400px;
    height: 100%;
    background: rgba(41, 53, 53, 0.8);

    .search-box {
        height: 50px;
        background: blue;
    }

    .result-content {
        margin-top: 8px;
        height: calc(100% - 58px);
        overflow-x: hidden;
        overflow-y: auto;
        background: pink;

        .housing-estate-info {
            .housing-bg {
                height: 200px;
                background: rgb(34, 196, 255);
            }

            .housing-introduce {
                & > div {
                    display: flex;

                    .l {
                        display: flex;
                        justify-content: flex-start;
                        flex-wrap: nowrap;
                        width: 80px;
                        line-height: 40px;
                    }

                    .r {
                        flex: 1;
                        text-align: left;
                        line-height: 40px;
                    }
                }
            }
        }
    }
}
</style>

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:26:48
 * @LastEditTime: 2022-09-15 16:00:35
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -10,7 +10,61 @@
-->

<template>
    <div class="container"></div>
    <div class="container">
        <div class="search-box"></div>
        <div class="result-content">
            <div class="housing-estate-info">
                <div class="housing-bg"></div>
                <div class="housing-introduce">
                    <div>
                        <div class="l">分类属性：</div>
                        <div class="r">住宅小区</div>
                    </div>
                    <div>
                        <div class="l">所属辖区：</div>
                        <div class="r">xxxxxxx警务室</div>
                    </div>
                    <div>
                        <div class="l">责任民警：</div>
                        <div class="r">---------</div>
                    </div>
                    <div>
                        <div class="l">标准地址：</div>
                        <div class="r">江苏省苏州市吴江区江林街道五星路xxxxxxxxxxxxxxxxx</div>
                    </div>
                </div>
            </div>

            <div class="nav-tab">
                <div class="nav" @click="navClick" data-type="0">基本信息</div>
                <div class="nav" @click="navClick" data-type="1">警务信息</div>
                <div class="nav" @click="navClick" data-type="2">预警信息</div>
            </div>

            <div class="base-info" v-show="navType == 0">
                <div class="sub-nav-list">
                    <div class="sub-nav">楼栋</div>
                    <div class="sub-nav">出入口</div>
                    <div class="sub-nav">停车场</div>
                    <div class="sub-nav">商业</div>
                </div>

                <div class="floor-content">
                    <div class="ridgepole-list"></div>
                    <div class="ridgepole-info"></div>
                    <div class="people-info"></div>
                    <div class="house-info"></div>
                </div>
                <div class="come-out-content"></div>
                <div class="park-content"></div>
                <div class="business-content"></div>
            </div>

            <div class="police-info" v-show="navType == 1"></div>

            <div class="warning-info" v-show="navType == 2"></div>
        </div>
    </div>
</template>

<script>
@@ -18,7 +72,7 @@
export default {
    data () {
        return {

            navType: 0
        }
    },
    created () {
@@ -31,7 +85,9 @@

    },
    methods: {

        navClick (e) {
            this.navType = e.target.dataset.type
        }
    }
}
</script>
@@ -39,7 +95,48 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    width: 400px;
    height: 100%;
    background: rgba(41, 53, 53, 0.8);

    .search-box {
        height: 50px;
        background: blue;
    }

    .result-content {
        margin-top: 8px;
        height: calc(100% - 58px);
        overflow-x: hidden;
        overflow-y: auto;
        background: pink;

        .housing-estate-info {
            .housing-bg {
                height: 200px;
                background: rgb(34, 196, 255);
            }

            .housing-introduce {
                & > div {
                    display: flex;

                    .l {
                        display: flex;
                        justify-content: flex-start;
                        flex-wrap: nowrap;
                        width: 80px;
                        line-height: 40px;
                    }

                    .r {
                        flex: 1;
                        text-align: left;
                        line-height: 40px;
                    }
                }
            }
        }
    }
}
</style>

 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:29:21
 * @LastEditTime: 2022-09-16 09:01:58
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -42,16 +42,26 @@
        return {
            menuList: [
                {
                    menuName: '辖区',
                    path: '/lyout/area'
                    menuName: '首页',
                    path: '/lyout/home'
                },
                {
                    menuName: '小区-房屋',
                    menuName: '社区感知',
                    path: '/lyout/house'

                },
                {
                    menuName: '保安活动',
                    menuName: '警力资源',
                    path: '/lyout/police'

                },
                {
                    menuName: '视频监控',
                    path: '/lyout/video'

                },
                {
                    menuName: '安保活动',
                    path: '/lyout/activity'
                },
            ],
@@ -140,7 +150,6 @@
            position: absolute;
            top: 80px;
            height: calc(100% - 80px);
            background: skyblue;
        }
    }
}

 src/views/police/index.vue

copy from src/views/area/index.vue
copy to src/views/police/index.vue

 src/views/video/index.vue