shuishen
2023-05-08 646cf1272bc67313dc50ccc765cfd16fea5ff773
src/views/activity/components/drawBtnBox.vue
@@ -1,22 +1,33 @@
<template>
    <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
        <div class="left">
        <span @click="showEmitBox = !showEmitBox" class="emit-expend">{{showEmitBox? '收起': '展开'}}</span>
        <div v-show="showEmitBox" class="left">
            <h3>预案布置</h3>
            <div>
                <span>要素资源:</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policeman')"
                            title="警员"
                        >
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
                        <button
                            @click="drawThreeArrow('billboard', 'police', 'policecar')"
                            title="警车"
                        >
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon4')" title="自定义图片标注">自定义图片标注</button>
                        <button
                            @click="drawThreeArrow('billboard', 'icon', 'icon4')"
                            title="自定义图片标注"
                        >自定义图片标注</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon5')" title="其他">其他</button>
@@ -27,10 +38,16 @@
                <span>作战标绘:</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
                        <button
                            @click="drawThreeArrow('polygon', 'polygon', 'polygon')"
                            title="多边形"
                        >多边形</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')" title="折线">折线</button>
                        <button
                            @click="drawThreeArrow('brokenline', 'brokenline', 'brokenline')"
                            title="折线"
                        >折线</button>
                    </li>
                </ul>
            </div>
@@ -40,7 +57,10 @@
                    <li>
                        <!-- <el-button
                        ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar', 'polyline')" title="巡逻路线">
                        <button
                            @click="drawThreeArrow('polyline', 'policecar', 'polyline')"
                            title="巡逻路线"
                        >
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
@@ -74,7 +94,8 @@
    data () {
        return {
            startDrawFlag: false
            startDrawFlag: false,
            showEmitBox: true
        }
    },
@@ -751,18 +772,31 @@
.draw-btn-box {
    position: fixed;
    display: flex;
    // left: 50%;
    bottom: 40px;
    left: 50%;
    bottom: 0px;
    color: #fff;
    background: $bg-one-color;
    white-space: nowrap;
    // transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    .emit-expend {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
        width: 54px;
        height: 28px;
        line-height: 28px;
        background: $bg-color;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
    }
    .left,
    .right {
        height: 100%;
        &>div {
        & > div {
            display: flex;
        }