wanda-bm-guide/src/views/other/index.vue

<template>
    <div class='other'>
        <div class='other-top'>
            <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
                <img :src='item.id==matterId?item.icon:item.icon1' alt />
                {{item.name}}
            </span>
        </div>
        <div class='other-bottom'>
            <div class='other-left'>
                <ul>
                    <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
                        <span class='circle'></span>
                        {{item.label}}
                    </li>
                </ul>
            </div>

            <div class='other-right' v-if='matterId!=1'>
                <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
            </div>
            <div class='legend-box'>
                <Legend></Legend>
            </div>
        </div>
        <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
        <zhsx-other v-if='matterId==1'></zhsx-other>
        <div class='qtfugl' v-if='matterId==2'>
            <img src='../../assets/imgs/matter_floorB2.png' alt />
        </div>
        <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
    </div>
</template>

<script>
import floorList from './floorList'
import OtherDialog from './otherDialog'
import { matter, floors } from '@/utils/plugins/components.js'
import ZhsxOther from './zhsxOther'
import GcfzDialog from './gcfzDialog'
export default {
    data() {
        return {
            matter,
            floors,
            everySystem: [],
            matterId: 2,
            systemName: '供电系统',
            floorInfo: {
                floorName: 'F1',
                floorId: 'f1'
            },
            dialogInfo: {}
        }
    },
    components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
    methods: {
        tabSyatem(item) {
            this.matterId = item.id
            this.everySystem = item.children
            this.systemName = item.name
        },
        emitFloor(item) {
            this.floorInfo = item
        },
        dialogVisible(item) {
            this.$refs.gcfzDialog.showModal(item)
        }
    },
    mounted() {
        this.everySystem = this.matter[0].children
    }
}
</script>
<style lang="less" scoped>
.other {
    background: rgba(242, 245, 247, 1);
    height: 100%;
    overflow: hidden;
    .other-top {
        margin-top: 24px;
        position: fixed;
        text-align: center;
        width: 100%;
        z-index: 2;
        .other-system {
            padding: 12px 23px;
            color: #1f2429;
            background: #fff;
            font-size: 16px;
            cursor: pointer;
            vertical-align: bottom;

            img {
                width: 16px;
                height: 16px;
                margin-right: 4px;
                margin-bottom: 3px;
            }
        }
        .isActive {
            color: #025baa;
        }
    }
    .other-bottom {
        display: flex;
        .other-left {
            position: fixed;
            z-index: 2;
            padding-top: 100px;
            color: #646c73;
            font-size: 14px;
        }
        .li-style {
            padding: 0 0 18px 35px;
            cursor: pointer;
            .circle {
                width: 6px;
                height: 6px;
                background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
                border-radius: 50%;
                display: inline-block;
                margin-right: 10px;
            }
        }
        .other-right {
            margin-top: 24px;
            flex: 1;
        }
        .legend-box {
            position: fixed;
            right: 32px;
            top: 155px;
        }
    }
    .qtfugl {
        img {
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
    }
}
</style>