signal_web/src/components/Console.vue

<template>
    <div class="console">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                控制台
            </div>
            <div class="cslist cubeContent">
                <div class="cstitle">
                    安全监控首页
                </div>
                <div class="loft cspart">
                    <div class="lt_title">
                        楼层
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(loft,i) in loftList">
                            <div :class="[{'active':loftIndex == i+1 }]" @click="ClickGetInfo(1,i)">
                                <div class="grid-content bg-purple"> {{loft.name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="manage cspart">
                    <div class="lt_title">
                        楼层管理区域
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(manage,j) in manageList">
                            <div :class="[{'active':manageIndex ==j+1 }]" @click="ClickGetInfo(2,j)">
                                <div class="grid-content bg-purple">{{manage.name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="equip cspart">
                    <div class="lt_title">
                        SignalDigger设备
                    </div>
                    <el-row :gutter="21">
                        <el-col :span="8" v-for="(equip,t) in equipList">
                            <div :class="[{'active':equipIndex == t+1 }]" @click="ClickGetInfo(3,t)">
                                <div class="grid-content bg-purple"> {{equip.name}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {getLoftInfo} from '../api/getApiRes.js'

    export default {
        data() {
            return {
                loftList: [],
                manageList: [],
                equipList: [],
                loftIndex: 0,
                manageIndex: 0,
                equipIndex: 0,
            };
        },
        mounted() {
            this.getLoftList();
        },
        methods: {
            // 获取楼层信息
            ClickGetInfo(list, index) {
                // 切换到选中
                this.loftIndex = 0;
                this.manageIndex = 0;
                this.equipIndex = 0;
                let thisBtn = {};
                switch (parseInt(list)) {
                    case 1:
                        this.loftIndex = index + 1;
                        thisBtn = this.loftList[index];
                        break;
                    case 2:
                        this.manageIndex = index + 1;
                        thisBtn = this.manageList[index];
                        break;
                    case 3:
                        this.equipIndex = index + 1;
                        thisBtn = this.equipList[index];
                        break;
                }
            },
            // 获取楼层信息
            getLoftList() {
                let postdata = {};
                getLoftInfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.loftList = json.Rs;
                        this.manageList = json.Rs;
                        this.equipList = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .console {
        float: left;
        color: #6DC1FF;
    }

    .other-people {
        width: 350px;
        min-height: 919px;
        margin-left: 0;
    }

    .cstitle {
        width: 314px;
        height: 45px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #0B2851;
        border: 1px solid #005EA2;
        line-height: 45px;
        margin-bottom: 26px;
    }

    .cspart {
        width: 314px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 22px;
    }

    .lt_title {
        text-align: left;
        font-size: 14px;
        margin-bottom: 16px;
    }

    .cspart .bg-purple {
        height: 30px;
        background: rgba(27, 86, 200, 0.14);
        border: 1px solid #005EA2;
        line-height: 30px;
        margin-bottom: 9px;
        cursor: pointer;
        font-size: 12px;
    }

    .active {
        background: #0162AA;
        border-color: #6DC1FF;
        color: #6DC1FF
    }

    .bg-purple {
        overflow: hidden;
    }
</style>