leftAssert.vue 3.43 KB
<template>
    <div class="container">
        <div class="assert-list" :class="[isAssert?'a-selected':'a-no-selected']" @click="changeSelect('isAssert')">
            <div class="expend">
                <img src="../assets/一张图/icon_资源目录.png" alt="">
            </div>
            <div class="name">资源目录</div>
        </div>
        <div style="margin-top: 16px;" v-show='isAssert'>
            <treeSearch @foldAssert="foldAssert('isAssert')"></treeSearch>
        </div>

        <div class="assert-list" :class="[isZTFX?'a-selected':'a-no-selected']" @click="changeSelect('isZTFX')"
            style="margin-top: 30px;">
            <div class="expend">
                <img src="../assets/一张图/icon_专题分析.png" alt="">
            </div>
            <div class="name">专题分析</div>
        </div>
        <div style="margin-top: 16px;" v-show='isZTFX'>
            <ztAnslysis @foldAssert="foldAssert('isZTFX')"></ztAnslysis>
        </div>

        <div class="assert-list" :class="[isFASC?'a-selected':'a-no-selected']" @click="changeSelect('isFASC')"
            style="margin-top: 30px;">
            <div class="expend">
                <img src="../assets/一张图/icon_方案审查.png" alt="">
            </div>
            <div class="name">方案审查</div>
        </div>
        <div style="margin-top: 16px;" v-show='isFASC'>
            <treeSearch @foldAssert="foldAssert('isFASC')"></treeSearch>
        </div>
        
        <div style="margin-top: 16px;"> 
            <auxiliaryReview @EFadb='EFadb' @EKgfz='EKgfz' @EGzfx='EGzfx'></auxiliaryReview>
        </div>
    </div>
</template>

<script>
    import treeSearch from './treeSearch';
    import ztAnslysis from './ztAnslysis';
    import auxiliaryReview from './auxiliaryReview';

    export default {
        name: 'leftAssert',
        components: {
            treeSearch,
            ztAnslysis,
            auxiliaryReview
        },
        data() {
            return {
                isAssert: true,
                isZTFX: false,
                isFASC: false,

                keepKey: ['isAssert', 'isZTFX', 'isFASC'],

            }
        },
        mounted() {},
        methods: {
            changeSelect(val) {
                this.keepKey.forEach(ele => {
                    if (val == ele) this[ele] = true;
                    else this[ele] = false;
                })
            },
            foldAssert(val) {
                this[val] = false;
            },
            // 方案对比
            EFadb() {
                this.$emit('EFadb');
            },
            // 光照分析
            EKgfz() {
                this.$emit('EKgfz');
            },
            // 控高分析
            EGzfx() {
                this.$emit('EGzfx');
            },
        }
    }
</script>

<style scoped>
    .container {
        color: #fff;
    }

    .assert-list {
        width: 206px;
        height: 36px;
        display: flex;
        align-items: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .a-selected {
        background-image: url('../assets/一张图/bg_资源目录.png');
    }

    .a-no-selected {
        background-image: url('../assets/一张图/bg_专题分析.png');
    }

    .assert-list .expend {
        transform: translate(20.7px, 2px);
    }

    .assert-list .name {
        transform: translateX(56px);
        line-height: 36px;
    }
</style>