1

guanqb

2022-09-20 14097cbc5b15f00698e1f035a07ccfb50370889a

1

 src/views/activity/index.vue

@@ -11,71 +11,84 @@

<template>
    <div class="container">
        <div class="title">活动信息</div>
        <div class="search-box">
            <div>
                <div class="category">活动类型：</div>
                <div class="category-value">
                    <el-select size="small" v-model="activityType" placeholder="请选择">
                        <el-option
                            v-for="item in activityOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
        <div class="left-container">
            <div class="title">活动信息</div>
            <div class="search-box">
                <div>
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div>
                <div class="category">活动名称：</div>
                <div class="category-value">
                    <el-input size="small" placeholder="请输入活动名称" v-model="searchActivity">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                <div>
                    <div class="category">活动名称：</div>
                    <div class="category-value">
                        <el-input size="small" placeholder="请输入活动名称" v-model="searchActivity">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
            </div>
            <div>
                <div class="category">选择时间：</div>
                <div class="category-value">
                    <el-date-picker
                        size="small"
                        v-model="selectTime"
                        type="date"
                        placeholder="选择日期"
                    ></el-date-picker>
                </div>
            </div>
        </div>
        <div class="result-content">
            <div class="table-box">
                <div class="row-box" v-for="(item, index) in 6" :key="index">
                    <div class="row-title">常规安保</div>
                    <div class="row-content">
                        <div>
                            <div class="category">活动名称：</div>
                            <div class="category-value">xxx活动</div>
                        </div>
                        <div>
                            <div class="category">活动时间：</div>
                            <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                        </div>
                        <div>
                            <div class="category">活动详情：</div>
                            <div class="category-value">护送某某某到某某某个地方</div>
                        </div>
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                        ></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div class="row-box" v-for="(item, index) in 6" :key="index">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
                                <div class="category">活动名称：</div>
                                <div class="category-value">xxx活动</div>
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
                                <div class="category-value">护送某某某到某某某个地方</div>
                            </div>
                        </div>
                    </div>
                </div>

            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
            ></el-pagination>
                <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    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,69 +226,88 @@

<style scoped lang="scss">
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
    color: #fff;
    background: rgba(7, 22, 37, 0.8);
    position: relative;

    .search-box {
        padding: 0 10px;

        & > div {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .category {
                width: 88px;
            }

            .category-value {
                flex: 1;
            }
        }
    }

    .result-content {
        flex: 1;
        margin-top: 8px;
    .left-container {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 400px;
        height: 100%;
        color: #fff;
        background: rgba(7, 22, 37, 0.8);

        .table-box {
        .search-box {
            padding: 0 10px;

            & > div {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .category {
                    width: 88px;
                }

                .category-value {
                    flex: 1;
                }
            }
        }

        .result-content {
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            margin-top: 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .row-box {
                margin: 10px;
                padding: 10px;
                background: rgba(15, 31, 50, 0.5);
            .table-box {
                flex: 1;
                overflow-x: hidden;
                overflow-y: auto;

                .row-content {
                    & > div {
                        display: flex;
                        line-height: 28px;
                .row-box {
                    margin: 10px;
                    padding: 10px;
                    background: rgba(15, 31, 50, 0.5);

                        .category {
                            width: 88px;
                        }

                        .category-value {
                            flex: 1;
                    .row-content {
                        & > div {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                            line-height: 28px;

                            .category {
                                width: 88px;
                            }

                            .category-value {
                                flex: 1;
                                display: flex;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                            }
                        }
                    }
                }
            }
        }
    }
    .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>