1

guanqb

2022-09-20 14097cbc5b15f00698e1f035a07ccfb50370889a

1

 src/views/activity/index.vue

@@ -11,6 +11,7 @@

<template>
    <div class="container">
        <div class="left-container">
        <div class="title">活动信息</div>
        <div class="search-box">
            <div>
@@ -57,7 +58,9 @@
                        </div>
                        <div>
                            <div class="category">活动时间：</div>
                            <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                        </div>
                        <div>
                            <div class="category">活动详情：</div>
@@ -76,6 +79,16 @@
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            ></el-pagination>
            </div>
        </div>
        <div class="second-container">
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
            ></el-tree>
        </div>
    </div>
</template>
@@ -105,7 +118,90 @@
            searchActivity: '',
            selectTime: '',
            navType: 0,
            currentPage: 4
            currentPage: 4,
            treeData: [{
                id: 1,
                label: '数据地图',
                children: [{
                    id: 2,
                    label: '实时警力(4)',
                    children: [{
                        id: 7,
                        label: 'BOOM(1)'
                    }, {
                        id: 8,
                        label: 'MDM(1)',
                    }, {
                        id: 9,
                        label: 'pdds(1)',
                    }]
                }, {
                    id: 3,
                    label: '视频监控(0)',
                }, {
                    id: 4,
                    label: '治安重点场所(60)',
                    children: [{
                        id: 10,
                        label: '卡点(20)',
                    },
                    {
                        id: 11,
                        label: '电警点(20)',
                    },
                    {
                        id: 12,
                        label: '岗亭(20)',
                    }]
                }, {
                    id: 5,
                    label: '重点单位(7522)',
                    children: [{
                        id: 13,
                        label: '大中型商超(2743)',
                    },
                    {
                        id: 14,
                        label: '幼儿园(545)',
                    },
                    {
                        id: 15,
                        label: '政府事业单位(3140)',
                    },
                    {
                        id: 16,
                        label: '机场(5)',
                    },
                    {
                        id: 17,
                        label: '银行(1089)',
                    }]
                },
                {
                    id: 6,
                    label: '特殊场所(1707)',
                    children: [{
                        id: 18,
                        label: '印刷店(85)',
                    },
                    {
                        id: 19,
                        label: '废旧金属收购(85)',
                    },
                    {
                        id: 20,
                        label: '开锁店(150)',
                    },
                    {
                        id: 21,
                        label: '酒店(1387)',
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    created () {
@@ -130,6 +226,10 @@

<style scoped lang="scss">
.container {
    height: 100%;
    position: relative;

    .left-container {
    position: relative;
    display: flex;
    flex-direction: column;
@@ -195,4 +295,19 @@
        }
    }
}
    .second-container {
        position: absolute;
        top: 0;
        display: flex;
        left: 405px;
        flex-direction: column;
        // width: 240px;
        // height: 70%;
        color: #fff;
        background: rgba(7, 22, 37, 0.8);
        ::v-deep .el-tree-node__content {
            background: rgba(0, 0, 0, 0.8) !important;
        }
    }
}
</style>