活动详情可控制显示隐藏

shuishen

2023-05-03 21a8b81bb23c4096bf6138eab3e4980668fbd836

活动详情可控制显示隐藏

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-05-02 19:22:56
 * @LastEditTime: 2023-05-03 22:39:23
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 

 src/styles/base/index.scss

@@ -511,51 +511,6 @@
    }
}

.activity-details-box {
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 640px;
        height: 400px;

        .el-dialog__header {
            height: 56px;
            line-height: 56px;
        }

        .el-dialog__body {
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
                    display: inline-block;
                    text-align-last: justify;
                    margin-right: 20px;
                }

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
            }
        }
    }
}

.special-animal-enter-active {
    transition: all .2s ease;
}

 src/styles/media/index.scss

@@ -1766,13 +1766,24 @@
                            left: countSizeVw(10, 1920);
                        }

                        .expend {
                            padding: 0 countSizeVh(10);
                            position: fixed;
                            top: countSizeVh(216);
                            right: countSizeVw(400, 1920);
                            width: countSizeVw(36, 1920);
                            height: countSizeVh(80);
                            line-height: countSizeVh(40);
                            border-radius: countSizeVh(10) 0 0 countSizeVh(10);
                        }

                        .activity-details-box {
                            top: countSizeVh(90);
                            right: countSizeVw(20, 1920);
                            top: countSizeVh(200);
                            right: countSizeVw(0, 1920);
                            width: countSizeVw(400, 1920);
                            padding: countSizeVh(10) countSizeVw(10, 1920);
                            border-radius: countSizeVh(10) countSizeVw(10, 1920);
                            z-index: 1;
                            border-radius: countSizeVh(10) 0 0 countSizeVh(10);

                            .title {
                                height: countSizeVh(36);
@@ -1897,11 +1908,11 @@
                        }

                        .plan-control {
                            top: countSizeVh(150);
                            right: countSizeVw(450, 1920);
                            top: countSizeVh(90);
                            right: countSizeVw(0, 1920);
                            width: countSizeVw(180, 1920);
                            padding: countSizeVh(10);
                            border-radius: countSizeVh(8);
                            border-radius: countSizeVh(8) 0 0 countSizeVh(8);

                            .row-box {
                                line-height: countSizeVh(28);
@@ -2198,46 +2209,6 @@
                            }
                        }

                    }

                    .activity-details-box {
                        .el-dialog__header span {
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body {
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button {
                            font-size: countSizeVh(18);
                            right: countSizeVw(10, 1920);
                        }

                        .el-dialog {
                            width: countSizeVw(640, 1920);
                            height: countSizeVh(400);
                        }

                        .el-dialog .el-dialog__header {
                            height: countSizeVh(56);
                            line-height: countSizeVh(56);
                        }

                        .el-dialog .el-dialog__body .item {
                            width: calc(50% - countSizeVw(20, 1920));
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                            margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .item>div:first-child {
                            margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .item>div:nth-of-type(2) {
                            width: calc(100% - countSizeVw(120, 1920));
                        }
                    }

                    .video-draw-box {

 src/views/activity/components/activityDetail.vue

@@ -1,44 +1,50 @@
<template>
    <div v-show="dialogVisible" class="activity-details-box">
        <div class="title">
            详情
            <div class="close" @click="closeActivityDetails"></div>
        </div>
        <div class="row-box">
            <div class="category">名称：</div>
            <div class="category-value">{{ activityDetails.name }}</div>
        </div>
        <div class="row-box">
            <div class="category">时间：</div>
            <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
        </div>
        <div class="row-box">
            <div class="category">包干民警：</div>
            <div class="category-value">{{ activityDetails.person }}</div>
        </div>
        <div class="row-box">
            <div class="category">联系方式：</div>
            <div class="category-value">{{ activityDetails.contact }}</div>
        </div>
        <div class="row-box">
            <div class="category">负责单位：</div>
            <div class="category-value">{{ activityDetails.company }}</div>
        </div>
        <div class="row-box">
            <div class="category">所属辖区：</div>
            <div class="category-value">{{ activityDetails.deptName }}</div>
        </div>
        <div class="row-box">
            <div class="category">人数：</div>
            <div class="category-value">{{ activityDetails.number }}</div>
        </div>
        <div class="row-box">
            <div class="category">地点：</div>
            <div class="category-value">{{ activityDetails.place }}</div>
        </div>
        <div class="row-box">
            <div class="category">内容：</div>
            <div class="category-value">{{ activityDetails.content }}</div>
    <div v-show="dialogVisible">
        <span
            :style="{right: showDetails ? '400px' : '0'}"
            @click="showDetails = !showDetails"
            class="expend"
        >{{showDetails? '收起': '展开'}}</span>
        <div v-show="showDetails" class="activity-details-box">
            <div class="title">详情</div>
            <div class="row-box">
                <div class="category">名称：</div>
                <div class="category-value">{{ activityDetails.name }}</div>
            </div>
            <div class="row-box">
                <div class="category">时间：</div>
                <div
                    class="category-value"
                >{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
            </div>
            <div class="row-box">
                <div class="category">包干民警：</div>
                <div class="category-value">{{ activityDetails.person }}</div>
            </div>
            <div class="row-box">
                <div class="category">联系方式：</div>
                <div class="category-value">{{ activityDetails.contact }}</div>
            </div>
            <div class="row-box">
                <div class="category">负责单位：</div>
                <div class="category-value">{{ activityDetails.company }}</div>
            </div>
            <div class="row-box">
                <div class="category">所属辖区：</div>
                <div class="category-value">{{ activityDetails.deptName }}</div>
            </div>
            <div class="row-box">
                <div class="category">人数：</div>
                <div class="category-value">{{ activityDetails.number }}</div>
            </div>
            <div class="row-box">
                <div class="category">地点：</div>
                <div class="category-value">{{ activityDetails.place }}</div>
            </div>
            <div class="row-box">
                <div class="category">内容：</div>
                <div class="category-value">{{ activityDetails.content }}</div>
            </div>
        </div>
    </div>
</template>
@@ -49,28 +55,45 @@
        'dialogVisible',
        'activityDetails'
    ],
    methods: {
        closeActivityDetails () {
            this.$emit('closeActivityDetails')

    data () {
        return {
            showDetails: true
        }
    },

    methods: {
    }
}
</script>

<style lang="scss" scoped>
.activity-details-box {
.expend {
    padding: 0 10px;
    position: fixed;
    top: 90px;
    // right: 10px;
    right: 20px;
    width: 400px;
    padding: 10px;
    border-radius: 10px;
    top: 216px;
    right: 400px;
    width: 36px;
    height: 80px;
    line-height: 40px;
    z-index: 11;
    color: #fff;
    background: $bg-color;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}

.activity-details-box {
    position: fixed;
    top: 200px;
    // right: 10px;
    right: 0px;
    width: 400px;
    padding: 10px;
    color: #fff;
    background: $bg-color;
    z-index: 11;
    border-radius: 10px 0 0 10px;

    .title {
        position: relative;
@@ -96,7 +119,7 @@
        line-height: 28px;
        display: flex;

        &>div {
        & > div {
            text-align: left;
        }


 src/views/activity/components/layersShowControl.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-25 14:31:44
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-25 17:32:34
 * @LastEditTime: 2023-05-03 22:33:49
 * @FilePath: \srs-police-affairs\src\views\activity\components\layersShowControl.vue
 * @Description: 
 * 
@@ -10,28 +10,43 @@
-->
<template>
    <div>
        <div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
        <div
            class="plan-control"
            v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)"
        >
            <div class="row-box" v-show="isHavePolice">
                <div class="category">要素资源：</div>
                <div class="category-value">
                    <el-switch v-model="policeSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="policeSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveArrow">
                <div class="category">作战标绘：</div>
                <div class="category-value">
                    <el-switch v-model="arrowBtnSwitch" @change="switchArrowBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="arrowBtnSwitch"
                        @change="switchArrowBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveLine">
                <div class="category">巡逻路线：</div>
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                    <el-switch
                        v-model="polylineBtnSwitch"
                        @change="switchBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>
        </div>
@@ -78,13 +93,13 @@
<style lang="scss" scoped>
.plan-control {
    position: fixed;
    top: 150px;
    right: 450px;
    top: 90px;
    right: 0px;
    width: 180px;
    padding: 10px;
    color: #fff;
    background-color: $bg-color;
    border-radius: 8px;
    border-radius: 8px 0 0 8px;
    z-index: 98;

    .row-box {
@@ -92,7 +107,7 @@
        line-height: 28px;
        display: flex;

        &>div {
        & > div {
            text-align: left;
        }