首页

shuishen

2022-09-16 efc50d74ac8119b5a5ccfa9fcaaf81c82a148671

首页

 src/views/home/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-15 16:00:35
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @LastEditTime: 2022-09-16 17:06:19
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -11,58 +11,81 @@

<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 class="left-container">
            <div class="person-box">
                <div class="title">
                    <div class="one-level">人</div>
                    <div class="two-level">现有人员</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 class="sub-title">
                    <div class="one-level">实有人口总数</div>
                    <div class="two-level">183.16万人</div>
                </div>
                <div class="come-out-content"></div>
                <div class="park-content"></div>
                <div class="business-content"></div>

                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">164.57万人</div>
                        <div class="num">户籍人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">17.52万人</div>
                        <div class="num">流动人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">91995人</div>
                        <div class="num">境外人口</div>
                    </div>
                </div>

                <div id="PersonEcharts"></div>
            </div>
            <div class="land-box">
                <div class="title">
                    <div class="one-level">地</div>
                    <div class="two-level">现有房屋</div>
                </div>

            <div class="police-info" v-show="navType == 1"></div>
                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">1822603户</div>
                        <div class="num">实有房屋</div>
                    </div>
                    <div class="tab">
                        <div class="num">634个</div>
                        <div class="num">关注场所</div>
                    </div>
                </div>

            <div class="warning-info" v-show="navType == 2"></div>
                <div id="LandEcharts"></div>
            </div>
            <div class="equipment-box">
                <div class="title">
                    <div class="one-level">物</div>
                    <div class="two-level">现有设备</div>
                </div>

                <div id="EquipmentEcharts"></div>
            </div>
        </div>
        <div class="right-container"></div>

        <div class="center-container">
            <div class="layers-control-btn">
                <el-checkbox v-model="houseLayerShow">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="carLayerShow">警车</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="phoneLayerShow">手台</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="videoLayerShow">监控</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
            </div>
        </div>
    </div>
</template>
@@ -72,7 +95,12 @@
export default {
    data () {
        return {
            navType: 0
            navType: 0,
            houseLayerShow: false,
            carLayerShow: false,
            phoneLayerShow: false,
            videoLayerShow: false,
            panoramaLayerShow: false,
        }
    },
    created () {
@@ -94,48 +122,48 @@

<style scoped lang="scss">
.container {
    position: relative;
    width: 400px;
    height: 100%;
    background: rgba(41, 53, 53, 0.8);
    .left-container {
        position: fixed;
        top: 80px;
        left: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);

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

        .land-box,
        .equipment-box {
            height: 30%;
        }
    }

    .result-content {
        margin-top: 8px;
        height: calc(100% - 58px);
        overflow-x: hidden;
        overflow-y: auto;
        background: pink;
    .right-container {
        position: fixed;
        top: 80px;
        right: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);
    }

        .housing-estate-info {
            .housing-bg {
                height: 200px;
                background: rgb(34, 196, 255);
            }
    .center-container {
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 80px;
        transform: translate(-50%, 0);

            .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;
                    }
                }
            }
        .layers-control-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            width: 160px;
            height: 60px;
            background: rgba(7, 22, 37, 0.8);
        }
    }
}