首页+小区页面

shuishen

2022-09-17 a3746a4120441faba6cf9f663a3d8c86fbcdba98

首页+小区页面

 src/views/home/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-16 17:06:19
 * @LastEditTime: 2022-09-17 10:40:49
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -26,19 +26,19 @@
                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">164.57万人</div>
                        <div class="num">户籍人口</div>
                        <div class="type">户籍人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">17.52万人</div>
                        <div class="num">流动人口</div>
                        <div class="type">流动人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">91995人</div>
                        <div class="num">境外人口</div>
                        <div class="type">境外人口</div>
                    </div>
                </div>

                <div id="PersonEcharts"></div>
                <div id="PersonEcharts" class="echarts-box"></div>
            </div>
            <div class="land-box">
                <div class="title">
@@ -57,7 +57,7 @@
                    </div>
                </div>

                <div id="LandEcharts"></div>
                <div id="LandEcharts" class="echarts-box"></div>
            </div>
            <div class="equipment-box">
                <div class="title">
@@ -65,10 +65,40 @@
                    <div class="two-level">现有设备</div>
                </div>

                <div id="EquipmentEcharts"></div>
                <div id="EquipmentEcharts" class="echarts-box"></div>
            </div>
        </div>
        <div class="right-container"></div>
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <div class="one-level">案件动态</div>
                    <div class="two-level">当前16</div>
                </div>

                <div class="echarts-box"></div>
            </div>
            <div class="alert-box">
                <div class="title">
                    <div class="one-level">事</div>
                    <div class="two-level">历史累计</div>
                </div>

                <div class="sub-title">
                    <div class="one-level">警情、案事件总量</div>
                    <div class="two-level">555578起</div>
                </div>

                <div class="echarts-box"></div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <div class="one-level">重点稳控/服务人群</div>
                    <div class="two-level">当前38</div>
                </div>

                <div class="echarts-box"></div>
            </div>
        </div>

        <div class="center-container">
            <div class="layers-control-btn">
@@ -122,6 +152,8 @@

<style scoped lang="scss">
.container {
    color: #fff;

    .left-container {
        position: fixed;
        top: 80px;
@@ -147,6 +179,66 @@
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);

        .case-box {
            height: 30%;
        }

        .alert-box,
        .crowd-box {
            height: 35%;
        }
    }

    .left-container,
    .right-container {
        .person-box,
        .land-box,
        .equipment-box,
        .case-box,
        .alert-box,
        .crowd-box {
            display: flex;
            flex-direction: column;
            padding: 10px;

            .title {
                display: flex;
                justify-content: space-between;
                height: 40px;
            }

            .sub-title {
                display: flex;
                justify-content: space-between;
                height: 36px;
            }

            .sub-tab {
                display: flex;

                .tab {
                    margin: 0 10px;
                    flex: 1;
                    background: rgba(5, 21, 38, 0.8);
                    border: 1px solid #fff;

                    & > div {
                        height: 26px;
                        line-height: 26px;
                    }
                }
            }

            .echarts-box {
                flex: 1;
                background: blue;
            }

            .sub-tab + .echarts-box {
                margin-top: 10px;
            }
        }
    }

    .center-container {

 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-15 16:00:35
 * @LastEditTime: 2022-09-17 10:41:34
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -51,9 +51,78 @@

                <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 class="ridgepole-info">
                        <div class="title">楼栋信息</div>

                        <div class="content">
                            <div>
                                <div>电梯</div>
                                <div>有</div>
                            </div>
                            <div>
                                <div>楼层总数</div>
                                <div>60</div>
                            </div>
                            <div>
                                <div>户室总数</div>
                                <div>240</div>
                            </div>
                        </div>
                    </div>
                    <div class="people-info">
                        <div class="title">人口情况</div>

                        <div class="content">
                            <div class="one">
                                <div>
                                    <div>31</div>
                                    <div>实有人口</div>
                                </div>
                                <div>
                                    <div>12</div>
                                    <div>重点人口</div>
                                </div>
                            </div>

                            <div class="two">
                                <div>
                                    <div>6</div>
                                    <div>户籍人口</div>
                                </div>
                                <div>
                                    <div>18</div>
                                    <div>流动人口</div>
                                </div>
                                <div>
                                    <div>7</div>
                                    <div>境外人口</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="house-info">
                        <div class="title">房屋情况</div>

                        <div class="content">
                            <div>
                                <div>7</div>
                                <div>房屋总数</div>
                            </div>
                            <div>
                                <div>2</div>
                                <div>出租</div>
                            </div>
                            <div>
                                <div>2</div>
                                <div>自住</div>
                            </div>
                            <div>
                                <div>2</div>
                                <div>空置</div>
                            </div>
                        </div>
                    </div>
                    <div class="house-element-info"></div>
                </div>
                <div class="come-out-content"></div>
                <div class="park-content"></div>
@@ -97,6 +166,7 @@
    position: relative;
    width: 400px;
    height: 100%;
    color: #fff;
    background: rgba(41, 53, 53, 0.8);

    .search-box {
@@ -137,6 +207,130 @@
                }
            }
        }

        .nav-tab {
            display: flex;
            justify-content: space-around;

            .nav {
                flex: 1;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #33566c;
            }
        }

        .base-info {
            .sub-nav-list {
                padding: 14px 0;
                display: flex;
                justify-content: space-around;

                .sub-nav {
                    padding: 0 15px;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 13px;
                    background: #0158a2;
                }
            }

            .floor-content {
                .ridgepole-info {
                    .content {
                        display: flex;

                        & > div {
                            height: 26px;
                            line-height: 26px;
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            border-right: 1px solid #50555f;

                            & > div:last-child {
                                margin-left: 14px;
                                font-size: 18px;
                                font-weight: bold;
                                color: #297ad1;
                            }
                        }

                        & > div:first-child {
                            width: 30%;
                        }

                        & > div:last-child {
                            border: none;
                        }
                    }
                }

                .people-info {
                    .content {
                        .two {
                            margin-top: 16px;
                        }

                        .one,
                        .two {
                            display: flex;
                            justify-content: space-around;

                            & > div {
                                flex: 1;

                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #499d99;
                                }

                                & > div:last-child {
                                    height: 26px;
                                    line-height: 26px;
                                }
                            }
                        }
                    }
                }

                .house-info {
                    .content {
                        display: flex;
                        justify-content: space-around;

                        & > div {
                            & > div:first-child {
                                height: 30px;
                                line-height: 30px;
                                font-size: 18px;
                                font-weight: bold;
                                color: #499d99;
                            }
                        }
                    }

                    border-bottom: 1px dashed #ccc;
                }

                .ridgepole-info,
                .people-info,
                .house-info {
                    .title {
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                    }

                    .content {
                        padding: 10px 0;
                    }
                }
            }
        }
    }
}
</style>

 src/views/police/index.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:26:42
 * @FilePath: \srs-police-affairs\src\views\area\index.vue
 * @LastEditTime: 2022-09-17 09:58:40
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -30,7 +30,7 @@
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
@@ -61,7 +61,7 @@
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>

 src/views/video/index.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-07 14:26:42
 * @FilePath: \srs-police-affairs\src\views\area\index.vue
 * @LastEditTime: 2022-09-17 10:13:22
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -26,7 +26,7 @@
                        :cell-style="{'text-align':'center'}"
                    >
                        <el-table-column type="index" label="序号" width="50">
                            <template scope="scope">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>